Question

This link (and all the other ‘margin vs padding’ questions I’ve checked), whilst asking the same question seems to only state the difference between the two. It says, “When you want space outside, use margin. When you want space inside use padding”.

That’s fair enough but if you look at This quick jsFiddle example, I’ve used various CSS to get the exact same effect.

This question is subjective and may get closed but I waste a lot of time deciding, “Should I put padding on the containing element… Or margin on the internal element itself.”

If you extend those divs to have multiple paragraphs then the third example soon fails if you want to have a consistent border/background. The one using Margin on the <p> tag seems to look better as it separates the paragraphs automatically.

Is there an easy thought process/set of questions I can ask myself to come to a conclusion when styling my website?

Answer 1

I think Itay Moav answers from this question provides a good check list on what conditions you would like to use margin, and on what conditions you would like to use padding. Let me copy-paste it here:

1. You have some kind of background properties. Margins won’t get them.
2. You have a border
3. You use TD (no margins)
4. Two nested items, The margins are collapsed together, where paddings not. (need to check this one)
5. They probably affect the width and height of the element differently. (If some one knows better, pls edit this).