Сворачивание вертикальных полей

Еще один важный аспект вертикального форматирования – сворачивание (collapsing) смежных вертикальных полей. Сворачивание применяется только к полям. Отступы и рамки, если они присутствуют, никогда не сворачиваются. Ненумерованный список, в котором элементы списка следуют друг за другом, – прекрасный пример сворачивания полей. Предположим, что для списка, содержащего пять элементов, объявлена следующая разметка:

li {margin-top: 10px; margin-bottom: 15px;}

У каждого элемента списка есть верхнее поле в 10 пикселов и нижнее поле в 15 пикселов. Однако при формировании визуального представления списка расстояние между соседними элементами списка составляет 15 пикселов, а не 25. Это происходит потому, что в вертикальном направлении соседние поля сворачиваются. Иначе говоря, меньшее из двух полей игнорируется в пользу большего. На рис. 7.18 показана разница между свернутыми и несвернутыми полями. Правильно реализованные агенты пользователя осуществляют сворачивание граничащих в вертикальном направлении полей где расстояние между каждым элементом списка составляет 15 пикселов.

Второй список показывает, что произошло бы, если бы агент пользователя не реализовывал сворачивание полей: в результате элементы списка отстояли бы друг от друга на 25 пикселов.


Те, кому не нравится слово «сворачивание», могут употреблять термин «перекрытие». То, что происходит с полями, не совсем перекрытие, но наглядно представить происходящее поможет следующая аналогия. Скажем, каждый элемент (например, абзац) представлен маленьким кусочком бумаги, на котором написано содержимое элемента. Каждый листок бумаги обрамлен прозрачным пластиком, который представляет поля.

Первый листок бумаги (скажем, h1) выкладывается на холст. Второй листок бумаги (абзац) выкладывается под ним и затем пододвигается до тех пор, пока край обрамления первого листка не коснется края второго листка. Если у первого листка по нижнему краю имеется поле в половину дюйма, а у второго – поле в треть дюйма сверху, то когда они будут совмещены, поле первого листка будет касаться верхнего края второго листка бумаги. Мы разместили эти два листка на холсте, и поля этих листков перекрываются. Сворачивание также происходит при встрече нескольких полей, например, в конце списка. Дополняя предыдущий пример, применим следующие правила:

ul {margin-bottom: 15px;}
li {margin-top: 10px; margin-bottom: 20px;}
h1 {margin-top: 28px;}

Нижнее поле последнего элемента списка составляет 20 пикселов, нижнее поле ul – 15 пикселов, а верхнее поле следующего h1 – 28 пикселов.


Итак, поскольку поля сворачиваются, расстояние между концом li и началом h1 составит 28 пикселов. Теперь вспомним примеры из предыдущего раздела, где введение рамки или отступов в блоке-контейнере требовало, чтобы поля дочерних элементов размещались внутри заданных границ. Увидеть это поведение можно, добавив рамку в элемент ul из предыдущего примера:

ul {margin-bottom: 15px; border: 1px solid;}
li {margin-top: 10px; margin-bottom: 20px;}
h1 {margin-top: 28px;}

В результате этого изменения нижнее поле элемента li окажется внутри его элемента родителя (ul). Поэтому сворачивание полей имеет место только между ul и h1

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание