В чем разница между margin и padding в CSS?

Наибольшая разница между padding и margin заключается в том, что вертикальные отступы (margin) сливаются друг с другом, тогда как padding этого не делает.

Рассмотрим два элемента, расположенных один над другим, каждый с padding в 1em. Этот padding считается частью элемента и всегда сохраняется.

В результате вы получите содержимое первого элемента, затем padding первого элемента, затем padding второго элемента, и после него — содержимое второго элемента. Таким образом, содержимое двух элементов будет находиться на расстоянии 2em друг от друга.

Теперь заменим padding на 1em margin. Margin считается внешним по отношению к элементу, и отступы соседних элементов будут перекрываться.

В этом втором примере вы получите содержимое первого элемента, за которым последует 1em объединенного отступа, а затем содержимое второго элемента. Таким образом, содержимое двух элементов будет находиться только на расстоянии 1em друг от друга.

Это может быть весьма полезно, если вы хотите установить 1em пространства вокруг элемента, независимо от того, какой элемент находится рядом.

Еще одна важная разница заключается в том, что padding включается в область клика и область фона (цвета/изображения), тогда как 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>По умолчанию</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>

По умолчанию я использую margin везде, за исключением случаев, когда у меня есть граница или фон, и я хочу увеличить пространство внутри этого видимого блока.

Вот пример HTML, который демонстрирует, как padding и margin влияют на щелчки и заполнение фона. Объект получает клики в области своего padding, но клики в области margin объекта передаются родителю.

$(".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>

Описание работы:

В данном примере, когда вы нажимаете на синюю область (оттенок с padding), будет выведено сообщение "inner", так как клик попадает в область padding. Если же вы нажмете на красную область (т.е. область margin), вывод будет "outer", так как клик уйдёт на родительский элемент.

Это поведение связано с тем, что области padding воспринимают клики, тогда как области margin не являются частью самого элемента. Клики вне области padding, но внутри margin, ведут себя иначе и обрабатываются родительским элементом, как показано в коде.

Дело в том, что при работе с отступами (margins) вам не нужно беспокоиться о ширине элемента.

Когда вы задаете элементу {padding: 10px;}, вам придется уменьшить ширину элемента на 20px, чтобы сохранить его «вписанным» и не нарушить расположение окружающих его элементов.

Я обычно начинаю с задания отступов (padding), чтобы всё «упаковать», а затем использую внешние отступы (margin) для небольших корректировок.

Также стоит учитывать, что отступы (padding) более предсказуемы в разных браузерах, в то время как Internet Explorer не очень хорошо обрабатывает отрицательные отступы (negative margins).

Стоит отметить, что когда авто-сливание маргинов начинает вас беспокоить (и вы не используете цвет фона на своих элементах), иногда просто проще использовать отступы.