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

Рис. 8,40. Разница между отступами и полями

Здесь складывается ситуация, когда все четыре абзаца имеют отступ в 1ет сверху и снизу и два из четырех имеют верхнее и нижнее поля размером 1еш. Результаты применения этой таблицы стилей приведены на рис. 8.40.

Первые два абзаца имеют отступы и отделены друг от друга пустым пространством в lem, поскольку их поля свернулись. Второй и третий абзацы также отделены промежутком в 1 em из-за нижнего поля второго абзаца. Третий и четвертый абзацы не разделены, потому что у них нет полей. Однако обратите внимание на расстояние между областью содержимого двух последних абзацев:оно составляет 2ет, потому что отступы не сворачиваются. Разные цвета фона показывают, где заканчивается один абзац и начинается другой.

Следовательно, применение отступов для разделения областей содержимого элементов может быть более сложной задачей, чем применение полей, хотя здесь есть и свои преимущества. Например, чтобы с помощью отступов обеспечить разделение абзацев традиционной пустой строкой, пришлось бы написать:

р {margin:0; padding:0.5em 0;}

Верхний и нижний отступы каждого абзаца размером в 0, Бет объединятся и образуют общий промежуток в 1еш. Казалось бы, к чему такие хлопоты? К тому, что тогда при желании можно было бы вставить между абзацами разделительные рамки, и боковые рамки создали бы иллюзию сплошной линии. Оба этих эффекта показаны на рис. 8.41:

р {margin:0; padding:0.5em 0; border-bottom:1px solid gray; border-left:Зрх double black;}