Что такое схлопывание внешних отступов в CSS?

Схлопывание внешних отступов — правило, по которому вертикальные margin соседних блоков (или родителя и ребёнка) объединяются в один, равный большему из них.

Три случая

1. Соседние блоки — margin-bottom: 20px и margin-top: 30px дают 30px.
2. Родитель и первый/последний ребёнок — если у родителя нет padding, border или содержимого над ребёнком, margin-top ребёнка «выходит» за родителя.
3. Пустой блок — его собственные margin-top и margin-bottom схлопываются друг с другом.

<section style="background: #eee">
  <h2 style="margin-top: 40px">Заголовок</h2>
</section>
<!-- отступ 40px окажется снаружи серого фона -->

Как избежать

• добавить родителю padding или border;
• display: flow-root у родителя;
• использовать flex или grid — там margin не схлопываются;
• задавать отступы через gap.

Коротко для собеседования

Вертикальные margin соседних блоков и родителя с ребёнком объединяются в больший; во flex/grid и при flow-root этого нет.

Подробнее: MDN — Схлопывание отступов