Схлопывание внешних отступов

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны). Это поведение известно как схлопывание внешних отступов (margin collapsing). Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элементы (siblings): Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство clear).
Родительский и первый/последний дочерние элементы: Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения margin-top родительского элемента, от margin-top одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height, min-height или max-height для отделения отступов margin-bottom родительского блока от margin-bottom отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.
Пустые блоки: Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height или min-height для отделения margin-top верхнего отступа этого блока от его margin-bottom нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.

На заметку:

Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.

Примеры

HTML

html

<p>Нижний отступ этого абзаца схлопнулся …</p>
<p>
  … с верхним отступом этого абзаца, объеденив отступы между ними в один, равный
  <code>1.2rem</code>.
</p>

<div>
  Этот родительский элемент содержит два абзаца!
  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
  <p>
    Нижний отступ этого абзаца схлопывается с отступом родителя, принимая
    значение <code>2rem</code>.
  </p>
</div>

<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>

CSS

css

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

Результат

Смотрите также

CSS Reference