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.

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
@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.

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…

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 }… πŸ™‚

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’.

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

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?

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.