Книга: HTML, XHTML и CSS на 100%

Свойства отступов

Свойства отступов

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

Всего существует четыре свойства отступов: 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 равен размеру используемого шрифта.

Оглавление книги