When to use margin vs padding in CSS

Alex_Angas_6651 0
Viewed 957778

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?

padding margin css
16 Answers

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

user_28470

Here is some HTML that demonstrates how padding and margin affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent. 

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});
.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

user_322030

The thing about margins is that you don't need to worry about the element's width.

Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.

So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.

Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.

user_2608410

One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.

alex_316710
Related