Поиск

Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Свойства отступов позволяют определять ширину области отступов блока. Свойство 'padding' является стенографическим и позволяет устанавливать ширину всех четырех сегментов отступа одновременно, в то время как остальные свойства относятся только к отдельным сегментам.

Свойства, рассматриваемые в данном разделе, относятся к типу значений <padding-width> , который может принимать одно из следующих значений:

<length>

Указывает фиксированную ширину.

<percentage>

Процентное сотношение, вычисляемое относительно ширины контейнера сгенерированного блока. В частности, можно заметить, что оно вычисляется и для таких свойств, как 'padding-top' и 'padding-bottom'.

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Значение: <padding-width> | наследуемое

Начальное значение: 0
Область применения: все элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Эти свойства устанавливают значение ширины верхнего, правого, нижнего и левого сегментов отступа.

BLOCKQUOTE { padding-top: 0.3em } 'padding'

Значение: <padding-width>{1,4} | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: все элементы
Наследуемое: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

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

Если оно принимает только одно значение, это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

Цвет или изображение, используемые для оформления фона отступов, задаются с помощью свойства 'background':

H1 {
background: white;
padding: 1em 2em;
}

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