What is the difference between margin
and padding
in CSS? When should one or the other be used?
15 Answers
The biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em
. This padding is considered to be part of the element and is always preserved.
You will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em
apart.
Now replace that padding with 1em
margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
In this second example, you will end up with the content of the first element followed by 1em
of combined margin followed by the content of the second element. So the content of the two elements is only 1em
apart.
This can be really useful when you know that you want to say 1em
of spacing around an element, regardless of what element it is next to.
The other big difference is that padding is included in the click region and background color/image, but margin is not.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
-
61+1 When styling typography and abritary sequences of paragraphs, headings and lists it's almost always better to space the elements with margins because of the adjacent margin collapsing behaviour.– Pete BCommented Nov 8, 2013 at 11:01
-
25Why is it that vertical margins collapse while horizontal ones don't? That could confuse a lot of people Commented Dec 17, 2014 at 21:58
-
23The vertical margins only collapse for block elements. For inline block elements the margins are added both vertically and horizontally. So I am not sure that it is an issue that horizontal margins don't collapse on block elements since they fill their container anyways.– MikeCommented Feb 16, 2015 at 22:19
-
7"Why is it that vertical margins collapse while horizontal ones don't?" there is no mechanism for having block elements side by side to each other without using floats - whose margins never collapse anyway (even vertical) or absolute positioning, where there's obviously no collapsing, or inline-block, which uses a different model where it's considered inline and content (spaces, text) is significant, or other things like tables, flexbox, columns where the gap between columns has special behaviour. So in short there is no place that horizontal margin collapsing could be used even if possible Commented Apr 13, 2015 at 1:48
-
12Also you should take note that padding is included in total width/height the element, when used with
box-sizing: border-box;
so if you havewidth: 100px; padding-left: 20px;
the total width will still be 100px but the area for content is reduce by 20px, unlikebox-sizing: content-box;
where padding is separate in calculating content width which makes your total width 120px in content-box; Commented Nov 9, 2015 at 6:19
Margin is on the outside of block elements while padding is on the inside.
- Use margin to separate the block from things outside it
- Use padding to move the contents away from the edges of the block.
-
13Here's a good practice: use solid red border to check the padding and margin. Sometimes, we could mess up things like
<a>
, which holds some text, surrounded by padding and margin. Use this trick to check how much space we can click.– p3nchanCommented Jul 16, 2015 at 15:09
The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.
The diagram below I think gives an instant visual understanding of the difference.
One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.
-
6w3.org/TR/CSS2/box.html#box-dimensions and the picture from w3 w3.org/TR/CSS2/images/boxdim.png Commented Oct 10, 2012 at 14:05
There are more technical explanations for your question, but if you want a way to think about margin and padding, this analogy might help.
Imagine block elements as picture frames hanging on a wall:
- The photo is the content.
- The matting is the padding.
- The frame moulding is the border.
- The wall is the viewport.
- The space between two frames is the margin.
With this in mind, a good rule of thumb is to use margin when you want to space an element in relationship to other elements on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will make the element bigger1.
1 You can alter this behavior with the box-sizing
attribute.
-
1Actually I don't agree on
box-sizing: border-box
making "the space for the content smaller". Here is a fiddle with 2 boxes where, if I kept padding the same and added "Active", then "Deactivate" on hover, it did not matter if I usedbox-sizing
. It would still expand the box. I had to max out the padding to the longest the box would expand to, then use trial and error to come up with a matching combination for the other words going into the box that would keep it the same width for each word: jsfiddle.net/navyjax2/ngzqqjah– vapcguyCommented Mar 3, 2015 at 3:19 -
3Hey vapcguy, thanks for your input. My statement is generally true, when width or height is declared for an element, while an element with undeclared dimensions is not really affected by
border-box
(see: jsfiddle.net/8yravLmL/1). I'll make my answer more nuanced to avoid confusion. Commented May 13, 2015 at 17:17 -
1The analogy is nice, but when you say The distance between two frames is the margin, I don't think that's quite correct. The distance is determined by the sum of the respective margins. See jsfiddle.net/9g0eL1mn/4– WolfCommented Feb 22, 2023 at 13:10
-
Yep! It's an analogy, and there are always exceptions. Even in your example, if you used
div
s instead ofspan
s, the vertical margins would collapse, and your definition would be incorrect. It wouldn't be the sum of the respective margins, but the greater of the two margins. The original question asked for the difference between margin and padding, and from the perspective of a single element, I think my answer is useful even if it's not exhaustive. Commented Dec 15, 2023 at 16:32
MARGIN vs PADDING :
Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.
Margin is not part of an element where padding is part of element.
Please refer below image extracted from Margin Vs Padding - CSS Properties
-
Referencing the border, rather than the rather vague 'Margin is on the outside of block elements while padding is on the inside.' outside/inside of what? And outside/inside suggests a static position, not that it affects the size of the containing element. This answer clarified it for me. Commented May 14, 2014 at 21:09
It's good to know the differences between margin
and padding
. Here are some differences:
Margin is outer space of an element, while padding is inner space of an element.
Margin is the space outside the border of an element, while padding is the space inside the border of it.
Margin accepts the value of auto:
margin: auto
, but you can't set padding to auto.Tip: You can use the trick to make elements centered inside their parents (even vertically). See my other answer for example.
Margin can be set to any number, but padding must be non-negative.
When you style an element, padding will also be affected (e.g. background color), but not margin.
Here is some HTML that demonstrates how padding
and margin
affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.
$(".outer").click(function(e) {
console.log("outer");
e.stopPropagation();
});
$(".inner").click(function(e) {
console.log("inner");
e.stopPropagation();
});
.outer {
padding: 10px;
background: red;
}
.inner {
margin: 10px;
padding: 10px;
background: blue;
border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
<div class="inner" style="position:relative; height:0px; width:0px">
</div>
</div>
-
1
The thing about margins is that you don't need to worry about the element's width.
Like when you give something {padding: 10px;}
, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.
So I generally start off by using paddings to get everything 'packed
' and then use margins for minor tweaks.
Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.
The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.
it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.
note that some times you have to use margin.
-
2"note that some times you have to use margin" Thats the question. When are these times?– BlackCommented Aug 19, 2020 at 7:58
One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.
Advanced Margin versus Padding Explained
It is inappropriate to use padding
to space content in an element; you must utilize margin
on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin
which works perfectly in Internet Explorer 4.
There are two exceptions when using padding
is appropriate to use:
It is applied to an inline element which can not contain any child elements such as an input element.
You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.
When you have a 100% width element with padding: 50px;
you effectively get width: calc(100% + 100px);
. Since margin
is not added to the width
it will not cause unexpected layout problems when you use margin
on child elements
instead of padding
directly on the element.
So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.
-
Interesting! Do you have a link for to that vendor bug? Commented Jan 17, 2016 at 23:05
-
1@AlexAngas Hope Wikipedia works for you? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug– JohnCommented Feb 22, 2016 at 15:03
I always use this principle:
This is the box model from the inspect element feature in Firefox. It works like an onion:
- Your content is in the middle.
- Padding is space between your content and edge of the tag it is inside.
- The border and its specifications
- The margin is the space around the tag.
So bigger margins will make more space around the box that contains your content.
Larger padding will increase the space between your content and the box of which it is inside.
Neither of them will increase or decrease the size of the box if it is set to a specific value.
Margin
Margin is usually used to create a space between the element itself and its surround.
for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.
Padding
I usually use when I've an element inside a border, <div>
or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.
So briefly, it's situational; it depends on what you are trying to do.
Position (10px): The dotted outer boundary signifies an offset from the containing block or parent element. This means the entire box (including margins) is placed 10 pixels away from its container on all sides.
Margin (16px): This is the space outside the border of the box, pushing other elements away from this box. Each side of the box has a margin of 16 pixels.
Border: The black line inside the margin, surrounding the padding. The size of the border is not specified, but it's shown as the dividing line between the margin and the padding.
Padding (8px): The green space between the content and the border. This padding is uniform, with 8 pixels on each side.
Content (100x201): The actual area where content is displayed, with specified dimensions of 100 pixels by 201 pixels.
Margin is outside the box and padding is inside the box
-
-
@TylerH he asked about this only ???(when to use margin and when to use padding?) Commented Apr 6, 2018 at 8:39
-
Yes, that's what he asked. How does this answer when to use each?– TylerHCommented Apr 6, 2018 at 14:14