Как отмечалось выше, отображая каждый элемент, браузер как бы создает прямоугольный блок, внутри которого и размещается содержимое элемента. Свойства полей определяют ширину области поля блока. Свойство margin позволяет управлять шириной всех четырех полей. Вы также можете указывать одно из следующих свойств: margin-top, margin-right, margin-bottom, margin-left либо некоторые из них в любой комбинации, чтобы задать значения полей только для отдельных сегментов.

Все свойства margin могут принимать следующие значения.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

• auto – браузер задает значение поля автоматически. Соответственно, разные браузеры будут использовать разные значения.

Рассмотрим пример – небольшое правило CSS, которое устанавливает значение ширины верхнего поля, равное 2 em.

H1 { margin-top: 2em }

Подробнее разберем сокращенную запись этих свойств – margin. Согласитесь, не очень-то удобно каждый раз набирать следующий код:

body {

margin-top: 2em;

margin-right: 2em;

margin-bottom: 2em;

margin-left: 2em;

}

Если свойство margin принимает только одно значение, то оно применяется ко всем полям. Если свойство принимает два значения, то первое применяется к верхнему и нижнему полям, а второе – к правому и левому. Если же оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему полю. И, наконец, если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

Если вы зададите для свойства margin только одно значение, то оно будет применяться ко всем полям. Если вы зададите два значения, то первое будет применяться к верхнему и нижнему, а второе – к правому и левому полям. Если же вы зададите три значения, то первое будет применяться к верхнему, второе – к левому и правому, а третье – к нижнему полю. И, наконец, если зададите четыре значения, то они будут применяться к верхнему, правому, нижнему и левому полям соответственно.

Напоследок рассмотрим такой пример:

body { margin: 1em 2em 3em }

Применив эту таблицу стилей к HTML-документу, вы установите ширину верхнего, правого, нижнего и левого полей страницы равной 1 em, 2 em, 3 em и 2 em соответственно.

Свойства отступов позволяют задать ширину области отступов блока.

Всего существует четыре свойства отступов: padding-top, padding-right, padding-bottom и padding-left, которые задают верхний, правый, нижний и левый отступы соответственно. Эти свойства можно комбинировать. Свойства padding могут принимать одно из следующих значений.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

В отличие от свойств поля свойства отступов не могут принимать отрицательные значения, и для них не может быть задано значение auto. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины сгенерированного блока.

Свойство padding является сокращенной записью всех четырех свойств отступов: padding-top, padding-right, padding-bottom и padding-left. Свойство padding работает, как и сокращенная запись для полей. Если свойство принимает только одно значение, то оно применяется ко всем отступам. Если свойство принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему отступу. Если свойство принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому отступам соответственно.

Фон отступов будет использовать цвет или изображение, заданные этому элементу с помощью свойства background:

h1 {

background: white;

padding: 1em 2em;

}

В приведенном примере ширина вертикальных (padding-top и padding-bottom) и горизонтальных (padding-right и padding-left) отступов устанавливается равной 1 em и 2 em соответственно. Напомню, что единица измерения em задается относительно размера шрифта элемента: 1 em равен размеру используемого шрифта.

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

Рассмотрим свойства border-top-width, border-right-width, border-bottom-width, border-left-width, которые определяют значение ширины верхней, правой, нижней и левой границы элемента страницы соответственно. Все свойства, рассматриваемые в данном разделе, могут принимать одно из следующих значений: