CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Печать

Рис. 7.19. Сворачивание в деталях

ul {margin-bottom:15px;}

li {margin-top:10px; margin-bottom:20px;>

hi {margin-top:28px;}

Нижнее поле последнего элемента списка составляет 20 пикселов, нижнее поле ul - 15 пикселов, а верхнее поле следующего hi - 28 пикселов. Итак, поскольку поля сворачиваются, расстояние между концом li и началом hi составит 28 пикселов, как показано на рис. 7.19.

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

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

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

Поля с отрицательными значениями

Отрицательные поля оказывают влияние на вертикальное форматирование и иа то, как происходит сворачивание полей. Если среди сворачиваемых полей есть какне-то отрицательные значения, то из них бро-

Рис. 7.20. Сворачивание (и отсутствие сворачивания) при введении рамок