Абсолютные значения и поля

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

p {background-color: silver; margin: 10px;}

(Как и раньше, фоновый цвет помогает показать область содержимого, а пунктирные линии приведены только для иллюстративных целей.) C каждой стороны области содержимого было добавлено пространство в 10 пикселов. Результат отчасти похож на применение атрибутов hspace и vspace в HTML. Кстати, margin позволяет задавать дополнительные поля вокруг изображения. Скажем, требуется, чтобы все изображения были окружены областью шириной один em:

img {margin: 1em;}

Иногда, впрочем, может потребоваться, чтобы поля с каждой стороны элемента были разными. Это так же просто. В следующем примере верхнее поле всех элементов h1 равно 10 пикселов, правое поле – 20 пикселов, поле снизу – 15 пикселов и поле слева – 5 пикселов, вот так:

h1 {margin: 10px 20px 15px 5px;}

Порядок значений важен и соответствует следующему шаблону:

margin: top right bottom left

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


Значения всегда применяются в этом порядке. Еще один способ запоминания порядка объявления сторон состоит в том, чтобы помнить, что расстановка сторон в правильном порядке помогает избежать неприятностей (в английском написании – «TRouBLe», т. е. TRBL: Top (верхнее) Right (правое) Bottom (нижнее) Left (левое)). Допускается также применение разных единиц измерения длины:

h2 {margin: 14px 5em 0.1in 3ex;} /* разнообразие единиц измерения! */

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

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

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