Should you use padding or margin to create space between boxes?
Last week I posted this CSS “tip” on Twitter:
Tip: Whenever you hesitate between margin and padding to create space around a box, go with padding as it will let you do more with the box.— Thierry (@thierrykoblentz) February 4, 2012 https://twitter.com/thierrykoblentz/statuses/165894368153182208
Because it’s not easy to say a lot in 140 characters, I expected to follow up with a couple of tweets in case somebody asked for more details. But after @smashingmagazine shared that tip with 530,000+ people and tweets like the ones below showed up, I knew it would require more work on my part :)
@thierrykoblentz @smashingmag typical sloppy css POV
So I’ll use a few of the responses I received to elaborate…
@thierrykoblentz @smashingmag You’re speaking metaphorically, right?
I was speaking from experience. I had recently created 8 styles sheets (“skins”) for 25 different layouts. During this process, I ran into various issues related to the many layouts I was dealing with and the most common ones had to do with my original choice of using margin to create space around boxes in the layouts. Many times I discovered that if I had styled such or such box via
padding rather than
margin, it would have made my life easier.
@thierrykoblentz that depends on the background color, borders, shadows, etc. on the box and if it has content inside it.— Heath Huffman (@Heathbits) February 5, 2012 https://twitter.com/Heathbits/statuses/165997623696834560
My tweet says “Whenever you hesitate between
padding” - which means when none of those matter. If they did, you’d not be hesitating one way or the other, you’d be picking the one that is best fit to style the box with your background, borders, shadows, and what not.
In other words, imagine you’re creating a set of layouts for which designers will create “skins”; while building these layouts you have no clue how your boxes will be styled because all you have is a wireframe.
@thierrykoblentz but technically, padding exists INSIDE the box...— Kyle Thomas (@khemingway) February 4, 2012 https://twitter.com/khemingway/statuses/165896742733221888
Which box? There are many boxes: content-box, padding-box, border-box, margin-box; and without applying any
padding, all these boxes have the same dimensions. In any case, padding is within the boundaries of the element (inside the border edges), which is not the case for margin. And this is exactly why I suggested to use the former, simply because it gives you more real estate to work with.
Actually, if you use that “box model”, I’d suggest favoring
border rather than
padding, for the exact same reason (to get a bigger box to style).
As a side note, regardless of how you choose to build the box (i.e.
border-box) there are many cases when things work the same; for example when you let a block-box fill its container or when you stretch it using
position:absolute with offsets (
left). In both of these cases, the construct of the box is the same as there is no explicit dimensions involved.
@thierrykoblentz what about background(); set to your box? Padding will not create 'space around' your box, but 'space inside'.— Bernhard Sturm (@sultaninen) February 5, 2012 https://twitter.com/sultaninen/statuses/166124614253158400
As I mention above, this is irrelevant at the time you style the box - since there are no specific requirements other than creating space around the box. But keep in mind that we now have properties like
background-size, etc. to style the background of a box in many ways, so in modern browsers the above point is moot.
@thierrykoblentz I defer. Applying padding breaks the layout in ie(6 & 7) most of the times. my suggestion is to apply margin— Sudip (@sudipfreelancer) February 5, 2012 https://twitter.com/sudipfreelancer/statuses/166039468283932673
Interesting… Thanks for reminding me about oldIE. But in this case there would be even more reasons to go with
padding as I think that in that browser we have more bugs related to margin than padding.
Here are a few examples where
padding will let you do more than
margin. Note that the usage of the word space below refers to the space we’d create via padding rather than margin.
- You want to display pseudo-elements inside the space surrounding the box but you can’t as the said box is a containing block styled with
- You want to apply a faux-columns technique sans image, but you can’t because the background of the box does not extend to the margin box
- You want to use negative
text-indentbut you can’t because the text is cut off (for the same reason pseudo elements do not show outside of the box)
- You want to show a border between 2 boxes, but the margins prevent the border from being painted in between the boxes
Of course if you follow this advice you’ll run into the opposite issue. You’ll find yourself having to overwrite
padding rules to replace them with
margin declarations. But from my experience, this should happen much less often than if you were styling the box the other way around. It just turns out that the odds are in favor of
padding, that’s all.