Между рамками и областью содержимого мы обнаруживаем отступы (padding) блока элемента. Неудивительно, что самое простое свойство, применяемое для работы с этой областью, называется padding. Как видите, это свойство принимает значения, выраженные в любых единицах измерения длины, или процентные значения. Итак, если требуется, чтобы все элементы h1 имели отступ по 10 пикселов со всех сторон, это делается очень просто:
h1 {padding: 10px; background-color: silver;}
Но можно сделать и так, чтобы отступ элементов h1 был непостоянным, а элементов h2 – постоянным.
h1 {padding: 10px 0.25em 3ex 3cm;} /* непостоянный отступ */
h2 {padding: 0.5em 2em;} /* значения тиражируются для низа и левой стороны */
Однако если добавить только отступ, увидеть его будет достаточно сложно, поэтому давайте включим еще и цвет фона:
h1 {padding: 10px 0.25em 3ex 3cm; background: gray;}
h2 {padding: 0.5em 2em; background: silver;}
Фон элемента распространяется на отступы. Мы уже говорили, что он также распространяется до внешнего края рамки, но фон должен пересечь отступ, перед тем как достичь рамки. По умолчанию у элементов нет отступов. Разделение между абзацами, например, традиционно обеспечивается только полями. Справедливо и то, что без отступов рамка элемента будет располагаться очень близко к содержимому самого элемента. Таким образом, при задании рамок элемента обычно хорошо добавить и некоторый отступ. Даже если рамки не задаются, отступы могут вести себя по-особенному. Рассмотрим следующие правила:
p {margin: 1em 0; padding: 1em 0;}
p.one, p.three {background: gray;}
p.two, p.four {background: silver;}
p.three, p.four {margin: 0;}
Здесь складывается ситуация, когда все четыре абзаца имеют отступ в 1em сверху и снизу и два из четырех имеют верхнее и нижнее поля размером 1em. Первые два абзаца имеют отступы и отделены друг от друга пустым пространством в 1em, поскольку их поля свернулись. Второй и третий абзацы также отделены промежутком в 1em из-за нижнего поля второго абзаца. Третий и четвертый абзацы не разделены, потому что у них нет полей. Однако обратите внимание на расстояние между областью содержимого двух последних абзацев: оно составляет 2em, потому что отступы не сворачиваются. Разные цвета фона показывают, где заканчивается один абзац и начинается другой.
Следовательно, применение отступов для разделения областей содержимого элементов может быть более сложной задачей, чем применение полей, хотя здесь есть и свои преимущества. Например, чтобы с помощью отступов обеспечить разделение абзацев традиционной пустой строкой, пришлось бы написать:
p {margin: 0; padding: 0.5em 0;}
Верхний и нижний отступы каждого абзаца размером в 0,5em объединятся и образуют общий промежуток в 1em. Казалось бы, к чему такие хлопоты? К тому, что тогда при желании можно было бы вставить между абзацами разделительные рамки, и боковые рамки создали бы иллюзию сплошной линии:
p {margin: 0; padding: 0.5em 0; border-bottom: 1px solid gray;
border-left: 3px double black;}