Схлопывание вертикальных марджинов

Имеем верхний элемент с margin-bottom: 30px;

Нижний элемент с margin-top: 30px;

В итоге между ними расстярояние всего 30 пикселей, а не 60.

Объяснение поведения

Классический эффект под названием “margin collapse” (схлопывание внешних отступов).

Это поведение нормальное и задумано по спецификации CSS.

🔹 Что происходит

Когда два вертикальных margin’а (сверху и снизу) встречаются друг с другом, они не суммируются,

а схлопываются — т.е. между элементами остаётся только больший из двух отступов.

🔹 Пример

<div class="top"></div>
<div class="bottom"></div>

.top {
  height: 50px;
  background: red;
  margin-bottom: 30px;
}

.bottom {
  height: 50px;
  background: blue;
  margin-top: 30px;
}

🧩 Визуально между ними будет не 60px, а только 30px — потому что margin’ы схлопнулись

🔹 Правило схлопывания

Margin’ы схлопываются, если:

• элементы находятся в нормальном потоке (не float, не absolute, не flex, не grid);
• между ними нет border, padding, inline-content или другого разделителя;
• margin’ы идут по вертикали (по горизонтали они не схлопываются!).

🔹 Как предотвратить схлопывание

Есть несколько способов:

✅ Способ 1: добавить padding или border

.wrapper {
  padding-top: 1px;
}

или

.top {
  border-bottom: 1px solid transparent;
}

→ margin’ы больше не “соприкасаются” напрямую → не схлопываются.

✅ Способ 2: использовать overflow

.parent {
  overflow: hidden;
}

Это создаёт новый “контекст форматирования блока”, и margin’ы внутри не схлопываются снаружи.

✅ Способ 3: использовать display: flex или display: grid

У флекс- и грид-контейнеров margin’ы соседних элементов не схлопываются вообще.

🔹 Важно

Горизонтальные margin’ы (слева/справа) никогда не схлопываются, это поведение касается только вертикальных (top/bottom).