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

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

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