От чего зависит схлопывание?

Что такое схлопывание (collapsing) в CSS?

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

От чего зависит схлопывание вертикальных margin?

Схлопывание зависит от нескольких ключевых факторов:

1. Тип элементов и их поток в документе

Схлопывание происходит только между блочными (block-level) элементами, участвующими в обычном потоке документа (normal flow). Оно не работает для:

• Элементов с float
• Элементов с position: absolute или position: fixed
• Элементов с display: flex или display: grid (внутри flex- или grid–контейнеров)
• Инлайновых элементов (display: inline)

2. Отношения между элементами

Схлопывание работает в трёх основных сценариях:

a) Соседние элементы (adjacent siblings)

/* margin-bottom первого и margin-top второго схлопываются */
.element1 {
  margin-bottom:.a;
}
.element2 {
  margin-top: b;
}
/* Итоговый отступ = max(a, b) */

b) Родитель и первый/последний дочерний элемент

.parent {
  margin-top: a;
}
.child {
  margin-top: b;
}
/* Если у родителя нет border, padding, inline-content,
   то margin-top родителя и ребёнка схлопываются */

c) Пустые блоки Если блок не имеет содержимого, border, padding и высоты, его margin-top и margin-bottom схлопываются друг с другом.

3. Наличие разделителей (барьеров для схлопывания)

Схлопывание НЕ происходит, если между элементами есть:

• border (непрозрачный)
• padding
• Контент (даже пустой текст)
• clear
• Элемент с overflow, отличным от visible (за исключением некоторых случаев)

<!-- Схлопывание НЕ произойдёт -->
<div style="margin-bottom: 20px; border: 1px solid transparent">
  <!-- Прозрачный border всё равно предотвращает схлопывание! -->
</div>
<div style="margin-top: 30px"></div>

4. Размеры схлопывающихся margin

При схлопывании берётся максимальное значение из объединяемых отступов:

/* margin-bottom: 20px + margin-top: 40px = общий отступ 40px */
.element-a { margin-bottom: 20px; }
.element-b { margin-top: 40px; }

Если один из margin отрицательный:

/* 30px + (-20px) = 10px */
.element-a { margin-bottom: 30px; }
.element-b { margin-top: -20px; }

Если оба margin отрицательные — берётся минимальное значение (наиболее отрицательное):

/* -20px + -10px = -20px */
.element-a { margin-bottom: -20px; }
.element-b { margin-top: -10px; }

5. Современные контексты форматирования

В Flexbox и Grid схлопывание не происходит между элементами внутри контейнера, но может происходить между самим контейнером и соседними блочными элементами в обычном потоке.

6. Направление потока

Схлопывание работает только для вертикальных margin (в горизонтальной оси его нет).

Практические примеры и исключения

<!-- Пример схлопывания родителя и ребёнка -->
<div class="parent" style="margin-top: 20px;">
  <div class="child" style="margin-top: 50px;">
    Контент
  </div>
</div>
<!-- Итоговый margin-top будет 50px, а не 70px -->

Важное исключение: схлопывание прерывается, если родительский элемент имеет свойство overflow со значением, отличным от visible, даже если это overflow: auto или overflow: hidden.

Как управлять схлопыванием?

1. Использовать padding вместо margin для внутренних отступов
2. Добавлять минимальный border или padding как барьер
3. Использовать Flexbox/Grid где это уместно
4. Применять методологию типа BEM для избежания вложенных margin

/* Решение проблемы схлопывания */
.container {
  padding-top: 1px; /* Минимальный барьер */
  /* или */
  border-top: 1px solid transparent;
}

Вывод

Схлопывание margin — это осознанное дизайнерское решение спецификации CSS, позволяющее создавать последовательные вертикальные ритмы в документе без сложных вычислений отступов. Понимание механизмов схлопывания критически важно для предсказуемой вёрстки и избежания распространённых ошибок в расположении элементов. Современные подходы (Flexbox, Grid) уменьшают зависимость от этого поведения, но для легаси-кода и некоторых сценариев вёрстки это знание остаётся необходимым.