Свойства отступов позволяют определять ширину области отступов блока. Свойство ‘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’ равен размеру используемого шрифта.
