Как утверждалось ранее, при задании полей элемента могут использоваться значения, выраженные в любых единицах измерения длины. Это достаточно просто: например, создадим вокруг абзацев свободное место в 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;} /* разнообразие единиц измерения! */