Как поведут себя стыкующиеся Margin-Bottom и Margin-Top?

Стыкующиеся `margin-bottom` верхнего блока и `margin-top` нижнего схлопываются: между блоками остаётся больший из двух отступов, а не их сумма.

Пример

.a { margin-bottom: 20px; }
.b { margin-top: 30px; }
/* расстояние между .a и .b — 30px, а не 50px */

Правила

• Работает только для вертикальных отступов блочных элементов в обычном потоке.
• Если один отступ отрицательный, они складываются: 30px и -10px дают 20px.
• Так же схлопывается margin ребёнка с margin родителя, если между ними нет padding, border или контента.

Когда схлопывания нет

• элементы во flex или grid-контейнере;
• float и position: absolute;
• родитель с display: flow-root или overflow не visible (для пары родитель–ребёнок).

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

Вертикальные margin соседних блоков схлопываются до большего; во flex и grid этого нет.

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