Почему при работе с версткой возникает эффект схлопывания полей?

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

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

Схлопывание предназначено для корректного отображения текста. htmlbook.ru Например, расстояние между абзацами без схлопывания увеличится в два раза, тогда как верхний отступ первого абзаца и нижний отступ последнего абзаца останутся неизменными. htmlbook.ru Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым. htmlbook.ru