Что такое margin collapse?

Margin collapse — это когда вертикальные margin-ы соседних блочных элементов схлопываются, и берётся больший из двух вместо суммы. Если у верхнего элемента margin-bottom: 20px и у нижнего margin-top: 30px — расстояние будет 30px, а не 50px. Схлопывание работает только по вертикали, не работает у flex/grid-детей, у float и absolute элементов. Это частый источник путаницы в вёрстке — отступы ведут себя неинтуитивно.