Поля и отступы

При помощи каскадных таблиц стилей можно устанавливать промежутки (или ширину полей) между соседними элементами страницы, а также отступы от границ элемента до его содержимого. Для задания ширины полей между соседними элементами используются следующие свойства:

• margin-top, margin-bottom – задает высоту верхнего и нижнего полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от высоты родительского элемента;

• margin-left, margin-right – задает ширину левого и правого полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от ширины родительского элемента;

• margin – задает ширину и высоту всех полей сразу.

Все перечисленные свойства также могут принимать значение auto (собственно, это и есть значение по умолчанию), позволяющее браузеру самому выбрать нужные размеры полей. Как влияют перечисленные свойства на расположение элементов страницы, показано на рис. 11.6.

Рис. 6. Поля между элементами до (слева) и после (справа) применения свойства margin

Для задания полей так, как показано на рис. 6, использовалось следующее правило таблицы стилей:

IMG {margin-top:2px; margin-bottom:2px; margin-left:30px; margin-right:30px}

Теперь настал черед отступов от края элемента до его содержимого. Итак, для задания отступов используются следующие свойства:

• padding-top, padding-bottom – задает отступы от верхней и нижней границ элемента до его содержимого;

• padding-left, padding-right – задает отступы от левой и правой границ элемента до его содержимого;

• padding – задает значение всех отступов содержимого от границ элемента (для всех элементов по умолчанию имеет значение).

Использовать свойства для задания отступов так же просто, как и рассмотренные выше свойства для задания полей.