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

Отступы 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, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
• При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
• Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
• Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.

<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>

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

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