Skip to main content
X

Explore your training options in 10 minutes

CSS Padding vs Margin: How to Tell the Difference

Christina Kopecky - December 29, 2020


When I first started learning how to write markup using HTML and CSS, it took some time to actually wrap my mind around the differences between margin and padding in the box model. In this article, I will share how I was finally able to differentiate between the two.

When talking about margin and padding, it’s best to review how the CSS box model works. Think of the box model – the containers we put the components of our website in – as a picture that has been placed in a picture frame:

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Visualize a picture in a picture frame to understand the CSS box model.

The content is the picture itself – that thing we want to put in the container. Just surrounding it is the padding .

If we were in a frame store, the padding would be the matting, which leads to the need for a larger picture frame. When we add padding in CSS, we essentially push out our content box to make the container bigger. Padding is the space in between the content and the border.

Next comes the border – it is essentially the frame that holds our content and padding. The margin is the space between the adjacent elements (our picture frames) on our viewport (the wall).

So the question becomes: when should we use margin and when should we use padding?

Some might say the answer to this is a little subjective, but in general it’s a good idea to use CSS margins if we want to adjust how an element looks in relation to other elements on the page. Padding should be used when we want the space around the content to be bigger.

Setting Margin and Padding

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Margin vs Padding</title>
   </head>
   <style>
       body {
           background: darkslategray;
           width: 100%;
           height: 100vh;
           max-width: 800px;
           display: flex;
           margin: 0 auto;
           justify-content: space-evenly;
           align-items: center;
       }
       #star-wars {
           background: ivory;
           border: 20px solid cyan;
       }
       #lotr {
           background: ivory;
           border: 20px solid green;
       }
   </style>
   <body>
       <div id="star-wars">
           <h3>Star Wars Chars</h3>
           <div>
               <p>Hans Solo</p>
               <p>Luke Skywalker</p>
               <p>Obi Wan Kenobi</p>
               <p>Chewbacca</p>
               <p>R2D2</p>
               <p>C3PO</p>
           </div>
       </div>
       <div id="lotr">
           <h3>Lord of the Rings Chars</h3>
           <div>
               <p>Bilbo</p>
               <p>Gandalf</p>
               <p>Frodo</p>
               <p>Sam</p>
               <p>Legolas</p>
               <p>Aragorn</p>
           </div>
       </div>
   </body>
</html>

In the code editor above, two boxes with basic backgrounds, content and borders are set. Imagine a scenario where you want the padding and the margins to be different on every side. In the <style> tag, try using different sizes on all sides, like so:

 #star-wars {
           background: ivory;
           border: 20px solid cyan;
           margin-top: 10px;
           margin-bottom: 30px;
           margin-left: 5px;
           margin-right: 25px;
           padding-top: 20px;
           padding-right: 25px;
           padding-bottom: 35px;
           padding-left: 45px;
 
       }
       #lotr {
           background: ivory;
           border: 20px solid green;
           margin-top: 10px;
           margin-bottom: 30px;
           margin-left: 5px;
           margin-right: 25px;
           padding-top: 20px;
           padding-right: 25px;
           padding-bottom: 35px;
           padding-left: 45px;
 
       }

That being said, there is a shorthand you can use: margin: 10px 25px 30px 5px; the numbers are in trouble (TRBL): top, right, bottom and left! This is the order you will find not only margin and padding, but pretty much any property that uses shorthand to describe the sides of your box.

Most likely, you will have a scenario where the top and bottom margins/padding will be the same and the left and right margins will be the same. If that happens, you can use a shortcut:

 #star-wars {
           background: ivory;
           border: 20px solid cyan;
           margin: 20px 30px;
           padding: 30px 20px;
       }
       #lotr {
           background: ivory;
           border: 20px solid green;
           margin: 20px 30px;
           padding: 30px 20px;

The first number is the top and bottom margin/padding and the second number is the left and right margin/padding.

If all the sides are going to be the same, you can just simply say padding: 30px; or margin: 30px;

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Conclusion

In this article, we reviewed aspects of the box model and discussed how margin and padding differ. Remember that margin deals with the space outside the border and padding deals with the space inside the border. Keep playing with the margins and paddings of the containers in the code editor above and you’ll be a master at setting margins and paddings in no time.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content