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

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

Соседние элементы (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

<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

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

p {
  margin: .4rem 0 1.2rem 0;
  background: yellow;
}

Результат

Спецификации

Specification Status Comment
CSS Level 2 (Revision 1)
Определение 'margin collapsing' в этой спецификации.
Рекомендация Initial definition

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

Метки документа и участники

Внесли вклад в эту страницу: xaveroniter, whiteGloom, mdnwebdocs-bot, Tuman, antipenko, Luboshenko, andrew-bishop, stakeout, RomanAkhma, hinduCoder
Обновлялась последний раз: xaveroniter,