Что такое схлопывание границ в CSS?

Схлопывание границ (margin collapsing) — это явление в CSS, когда вертикальные границы блоков, находящихся рядом, сливаются в одну. Размер этой объединенной границы определяется как максимальное значение из схлопывающихся границ.

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

• Между соседними элементами: Вертикальные границы двух соседних элементов схлопываются.

  <p>Абзац 1</p>
  <p>Абзац 2</p>
  

  Если <p> имеют margin-bottom и margin-top соответственно, эти границы могут схлопнуться.

• Между родителем и первым/последним дочерним элементом: Если у родителя нет border, padding, display: flex, display: grid, overflow: hidden и других свойств, которые создают контекст форматирования, его верхняя граница может схлопнуться с margin-top первого дочернего элемента. Аналогично, нижняя граница родителя может схлопнуться с margin-bottom последнего дочернего элемента.

  <div class="parent">
    <p class="child">Дочерний элемент</p>
  </div>
  

• При пустом элементе: Если у элемента нет содержимого (height: 0, нет border и padding), его верхняя и нижняя границы могут схлопнуться друг с другом.

  <div class="empty"></div>
  

Таблица, иллюстрирующая результаты схлопывания:

Схлопывание границ происходит только в вертикальном направлении (только margin-top и margin-bottom). Горизонтальные границы (margin-left и margin-right) никогда не схлопываются.

Существуют способы предотвратить схлопывание, например, добавление border, padding, использование display: flex, display: grid, overflow: hidden или создание нового контекста форматирования блока с помощью display: flow-root.