3

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?

Community
  • 1
  • 1
MatthewMcGovern
  • 3,328
  • 1
  • 17
  • 19
  • 2
    There is no right answer. Pick one. Use it. Change it later if you need to. – Quentin Oct 18 '12 at 09:02
  • @Quentin, I used to do that but then I found after a couple of weeks, changing the slightest bit of margin would cause everything to misalign, I think because of the collapseable margin rule where the largest takes precedence instead of stacking. I never have a problem using just padding but I do have to 'hack' some bits together (using `
    ` and other means).     – MatthewMcGovern Oct 18 '12 at 09:07
  • possible duplicate: http://stackoverflow.com/questions/1419519/css-nested-divs-margins-vs-padding/ – feeela Oct 18 '12 at 09:11

3 Answers3

5

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).
Community
  • 1
  • 1
Dipa
  • 300
  • 1
  • 2
  • 8
3
  • margins (can) collapse into each other, i.e. two elements with 3em margins each have a space of 3em between them
  • paddings don't collapse, i.e. two elements with 3em paddings have 6em space between their contents
  • as soon as you apply backgrounds and/or borders to the elements with margin/padding, the two will result in very different behavior

Keep those in mind, apply as appropriate. There's no hard and fast rule.

deceze
  • 471,072
  • 76
  • 664
  • 811
0

margins are the gap outside the object in question, but paddings are the gap inside,

ie: when you your object is a green box with some text in it, with white bg, margin leaves gaps in white area, while padding leaves in the green.

serdarsenay
  • 2,363
  • 19
  • 21