Как работает эффект схлопывания отступов между блочными элементами?

Эффект схлопывания отступов между блочными элементами заключается в том, что вертикальные внешние отступы двух или более блочных элементов, расположенных рядом друг с другом, не суммируются, а объединяются между собой. habr.com htmlbook.ru

Процесс происходит так: когда внешние вертикальные отступы блочных элементов соприкасаются, то остаётся отступ, значение которого равняется значению большего из них, при этом значение отступа элемента с меньшей границей равно нулю. habr.com

Некоторые особенности работы эффекта:

• Если один из отступов имеет отрицательное значение, то финальное значение схлопнувшегося отступа формируется путём суммирования исходных значений блочных элементов. habr.com
• Если оба отступа отрицательные, то из двух значений выбирается наибольшее по модулю, оно же и выступает в качестве отрицательного отступа между элементами. htmlbook.ru
• Если положительных отступов нет, то максимум абсолютных значений соседних отступов вычитается из нуля. html5book.ru

Эффект работает только для блоков, у которых не заданы поля и границы. htmlbook.ru Для отступов слева и справа схлопывание никогда не применяется. htmlbook.ru