When to use margin vs padding in CSS

ID : 287

viewed : 358

Tags : csspaddingmargincss





Top 5 Answer for When to use margin vs padding in CSS

vote vote

94

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>

vote vote

81

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

vote vote

74

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.

vote vote

64

There are more technical explanations for your question, but if you want a way to think about margin and padding, this analogy might help.

Imagine block elements as picture frames hanging on a wall:

  • The photo is the content.
  • The matting is the padding.
  • The frame moulding is the border.
  • The wall is the viewport.
  • The space between two frames is the margin.

With this in mind, a good rule of thumb is to use margin when you want to space an element in relationship to other elements on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will make the element bigger1.


1 You can alter this behavior with the box-sizing attribute.

vote vote

56

MARGIN vs PADDING :

  1. Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.

  2. Margin is not part of an element where padding is part of element.

Please refer below image extracted from Margin Vs Padding - CSS Properties

Margin vs Padding

Top 3 video Explaining When to use margin vs padding in CSS







Related QUESTION?