What is the difference between Margins & Padding?
Well, it’s not a bone head question. In fact, it’s one of the more confusing aspects of CSS.
CSS has a thing called the Box model. You can look that up with your favorite search engine if you want a lot of details.
But simply put - Margins, then a border, then padding and then finally the content.
One of the biggest differences between padding and margin is that vertical margins auto-collapse, and padding doesn’t. So if you have a bottom margin of 16px and on the next element down you have a top margin of 16px, you only end up with 16px. The two collapse. If in that example you used padding then you would have 32px between the two elements.
Another difference is the padding is included in the click region and background(color or image), but the margin isn’t.
2 Likes
In laymans terms, the margin is the space between elements and/or the side of the browser window. Padding is the space between the inner edges of the element and the content.
As Teefers said, if say you had two boxes next to each other, both the same colour. With no margin the two boxes will be touching each other and so appear as one. If you add some margin a gap will appear between the two boxes.
Whereas if you add to the boxes a border and then add some text to the box, the text will butt right up against the border. If you add some padding (which is like margin but inside the box) the text will get squished inwards a bit, so appearing to put a gap between it and the border of the box. You have in effect padded the inside of the box.
An alternative way to get some space between the box border and the text is to add some margin to the text. The look will be more or less the same until the boxes start to get squished by the height or width of the browser, at which point the way the box and the ext interact will be different depending on how you got the gap to appear (padding to the box or margin to the text.
1 Like
Thanks guys. That helps clear a lot up.
The link that Gary included also has a short discussion about the “Box” model.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.