Схлопывание внешних отступов

Свойства блоков margin-top и margin-bottom иногда комбинируются (схлопываются) в единый отступ, размер которого равен наибольшему из комбинируемых отступов. Это поведение известно, как схлопывание внешних отступов.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элемены (siblings)

Внешние отступы соседних элементов схлопываются (за исключение случая, когда последниму элементу применено свойство clear). Например:

 <p>Нижний отступ этого абзаца схлопнут...</p>
 <p>...с верхним отступом этого абзаца.</p>

Родительский и первый/последний дочерние элементы

Если отстутствуют границы, внутренние отступы, строчное содержимое или не используется свойство clear отделения margin-top блока от margin-top блока, являющегося его первым дочерних элементом или отстутствуют границы, внутренние отступы, строчное содержимое, height, min-height или max-height для отделения margin-bottom блока от margin-bottom от его последниго дочернего элемента, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.

Пустые блоки

Если отстутствуют границы, внутренние отступы, строчное содержимое, height или min-height для отделения margin-top этого блока от его margin-bottom, то верхние и нижние внешние отступы этого блока схлопываются.

Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.

Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последниего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.

При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.

Внешние отступы плавающих и  абсолютно позиционируемых элементов никогда не схлопываются.

Specifications

See also

• CSS Reference