Как происходит схлопывание вертикальных и горизонтальных margin'ов в CSS?

Question

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

YeaHub · Accepted Answer

В CSS вертикальные margin'ы могут схлопываться, то есть объединяться в один общий отступ. Это происходит, когда два соседних блока имеют вертикальные margin'ы, и вместо их суммирования браузер выбирает больший из двух отступов. Схлопывание также может происходить у пустых блоков, первого и последнего дочерних элементов. Горизонтальные margin'ы, напротив, не схлопываются, так как такие отступы обычно не приводят к наложению элементов друг на друга. Например, если один элемент имеет margin-bottom: 20px, а следующий — margin-top: 30px, общий отступ между ними будет 30px, а не 50px.