Отступы

Между рамками и областью содержимого мы обнаруживаем отступы (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;}

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

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отрицательные и свернутые поля

Вернуться в раздел: CSS / 8. Отступы, рамки и поля