Categories
css margin padding

When to use margin vs padding in CSS [closed]

2543

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

2

  • 4

    Use padding on <a> tags when you want to increase the focusable area.

    – vhs

    Jan 27, 2019 at 23:59

  • Let’s not “please” close “opinion based” question as this is very important basic question to be clarified for new developers

    – vikramvi

    Jun 28 at 14:04

1756

TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn’t.

Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.

So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.

Thus the content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences are that padding is included in the click region and background color/image, but not the margin.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

5

  • 58

    +1 When styling typography and abritary sequences of paragraphs, headings and lists it’s almost always better to space the elements with margins because of the adjacent margin collapsing behaviour.

    – Pete B

    Nov 8, 2013 at 11:01

  • 24

    Why is it that vertical margins collapse while horizontal ones don’t? That could confuse a lot of people

    Dec 17, 2014 at 21:58

  • 21

    The vertical margins only collapse for block elements. For inline block elements the margins are added both vertically and horizontally. So I am not sure that it is an issue that horizontal margins don’t collapse on block elements since they fill their container anyways.

    – Mike

    Feb 16, 2015 at 22:19

  • 7

    “Why is it that vertical margins collapse while horizontal ones don’t?” there is no mechanism for having block elements side by side to each other without using floats – whose margins never collapse anyway (even vertical) or absolute positioning, where there’s obviously no collapsing, or inline-block, which uses a different model where it’s considered inline and content (spaces, text) is significant, or other things like tables, flexbox, columns where the gap between columns has special behaviour. So in short there is no place that horizontal margin collapsing could be used even if possible

    Apr 13, 2015 at 1:48

  • 11

    Also you should take note that padding is included in total width/height the element, when used with box-sizing: border-box; so if you have width: 100px; padding-left: 20px; the total width will still be 100px but the area for content is reduce by 20px, unlike box-sizing: content-box; where padding is separate in calculating content width which makes your total width 120px in content-box;

    Nov 9, 2015 at 6:19

1561

Margin is on the outside of block elements while padding is on the inside.

  • Use margin to separate the block from things outside it
  • Use padding to move the contents away from the edges of the block.

enter image description here

2

  • 69

    yet, the correct answer is by @pavon below. margins of adjacent elements overlap whereas padding does not overlap. i. e., the total separation is padding(A) + padding(B) + max(margin(A), margin(B))

    Apr 4, 2013 at 6:04


  • 12

    Here’s a good practice: use solid red border to check the padding and margin. Sometimes, we could mess up things like <a>, which holds some text, surrounded by padding and margin. Use this trick to check how much space we can click.

    Jul 16, 2015 at 15:09

611

The best I’ve seen explaining this with examples, diagrams, and even a ‘try it yourself’ view is here.

The diagram below I think gives an instant visual understanding of the difference.

enter image description here

One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.

2