Корпус модели: отступы CSS

Слияние отступов означает, что когда два вертикальных отступа встречаются, они形成一个 отступ.

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

Слияние отступов

Слияние отступов (叠加) - это довольно простая концепция. Но на практике при разметке веб-страниц это может вызвать много путаницы.

Простыми словами, слияние отступов означает, что когда два вертикальных отступа встречаются, они形成一个 отступ. Высота объединенного отступа равна наибольшему из высот сливающихся отступов.

Когда один элемент出现在 другом сверху, нижний отступ первого элемента и верхний отступ второго элемента сливаются. См. рисунок ниже:

Пример слияния внешних отступов CSS 1

Попробуйте это сами

Когда один элемент включен в другой (предполагается, что отступы или рамка не отделяют отступы), их верхние и/или нижние отступы также сливаются. См. рисунок ниже:

Пример слияния внешних отступов CSS 2

Попробуйте это сами

Хотя это может показаться странным, отступы могут даже сливаться с собой.

Предположим, что у нас есть пустой элемент, у которого есть отступы, но нет рамки или наполнения. В этом случае, верхний и нижний отступы соприкасаются друг с другом и сливаются:

Пример слияния внешних отступов CSS 3

Если этот отступ встретится с отступом другого элемента, он также будет слипаться:

Пример слияния внешних отступов CSS 4

Вот почему系列的 абзацев занимают очень мало места, потому что все их отступы сливаются в один маленький отступ.

Слияние внешних отступов может сначала показаться странным, но на самом деле это имеет смысл. Например, в типичном текстовом документе, состоящем из нескольких абзацев, пространство над первым абзацем равно верхнему внешнему отступу абзаца. Если бы не было слияния отступов, все последующие отступы между абзацами были бы суммой верхнего и нижнего отступов. Это означало бы, что расстояние между абзацами будет в два раза больше, чем вверху страницы. Если会发生 слияние отступов, верхний и нижний отступы абзацев сливаются在一起, и расстояние между ними становится одинаковым.

Реальное значение слияния внешних отступов CSS

Примечание:Только вертикальные внешние отступы блоков в обычном потоке документа будут слипаться. Отступы между инлайн-блоками, флоутами или элементами с абсолютным позиционированием не будут слипаться.