CSS Padding vs Margin: How to Tell the Difference
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:
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.
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;
"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.
