Слияние внешних отступов CSS
- Предыдущая страница Внешние отступы CSS
- Следующая страница Внутренние отступы CSS
Слияние внешних отступов означает, что когда два вертикальных отступа встречаются, они образуют один отступ.
Высота слиянного отступа равна наибольшей высоте двух сливающихся отступов.
Слияние внешних отступов
Слияние внешних отступов (叠加) - это довольно простая концепция. Однако, на практике при планировании веб-страниц это может привести к многим путаницам.
Простыми словами, слияние внешних отступов означает, что когда два вертикальных отступа встречаются, они образуют один отступ. Высота слиянного отступа равна наибольшей высоте двух сливающихся отступов.
Когда один элемент появляется над другим, нижний отступ первого элемента слияется с верхним отступом второго элемента. См.下图:
Когда один элемент содержится в другом (предположим, что отступы или рамки не разделяют отступы), их верхние и/или нижние отступы также сливаются. См.下图:
Несмотря на то, что это может показаться странным, внешние отступы могут даже сливаться с собой.
Предположим, что у пустого элемента есть отступ, но нет рамки или заполнения. В этом случае верхний и нижний отступы встречаются друг с другом, и они сливаются:
Если этот отступ встречается с внешним отступом другого элемента, он также сливается:
Вот почему серия элементов абзацев занимает очень мало места, потому что все их внешние отступы сливаются в один маленький отступ.
Слияние внешних отступов может сначала показаться странным, но на самом деле это имеет смысл. Давайте возьмем пример типичной текстовой страницы, состоящей из нескольких абзацев. Пространство над первым абзацем равно верхнему внешнему отступу абзаца. Если бы не слияние внешних отступов, все последующие отступы между абзацами были бы суммой相邻ного верхнего и нижнего отступов. Это означает, что пространство между абзацами будет в два раза больше, чем вверху страницы. Если происходит слияние внешних отступов, верхний и нижний внешние отступы абзацев сливаются вместе, и расстояние между ними становится одинаковым.
Примечание:Слияние внешних отступов происходит только для блоковых рамок в обычном потоке документа. Внешние отступы для инлайн-рамок, плавающих рамок или рамок с абсолютной позиционировкой не сливаются.
Все свойства внешнего отступа CSS
| Свойство | Описание |
|---|---|
| margin | Краткое свойство для установки свойств отступа в одном заявлении. |
| margin-bottom | Установить нижний внешний отступ элемента. |
| margin-left | Установить левый внешний отступ элемента. |
| margin-right | Установить правый внешний отступ элемента. |
| margin-top | Установить верхний внешний отступ элемента. |
- Предыдущая страница Внешние отступы CSS
- Следующая страница Внутренние отступы CSS
