Should you use padding or margin to create space between boxes?

This article was first published on css-101 (02-10-2012).

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 :)

if you hesitate before choosing margin or padding to create space around a box...you've got reading to do. @thierrykoblentz @smashingmag

— build/create studios (@buildcreate) February 5, 2012 https://twitter.com/buildcreate/statuses/165991717353422850

@thierrykoblentz @smashingmag typical sloppy css POV https://twitter.com/#!/redhourglassweb/status/165901317166989313

So I’ll use a few of the responses I received to elaborate…

@thierrykoblentz @smashingmag You’re speaking metaphorically, right? https://twitter.com/#!/SeeHaden/status/165898332789673984

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 margin and 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 margin, border, or 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.

@thierrykoblentz @smashingmag * { box-sizing: border-box } http://t.co/6V1tQGMW :)

— Jérôme (@phollow) February 4, 2012 https://twitter.com/phollow/statuses/165896222173954049

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. content-box vs. 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 (top, right, bottom, 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-clip, background-origin, 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.

@thierrykoblentz @smashingmag why exactly is that?

— Justin Shearer (@justinsane98) February 4, 2012 https://twitter.com/justinsane98/statuses/165912165314871296

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.

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.

Share