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

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

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

<length>

определяет фиксированную ширину.

<percentage>

Процент рассчитывается с учетом ширины (width) сгенерировано блока содержания, даже для 'padding-top' и 'padding-bottom'.

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' 
Тип значения:              <padding-width> | inherit
Начальная величина:   0
Применяется:              ко всем элементам
Наследование:            нет
Процентная база:        относится к ширине объемлющего блока
Медиа:                        визуальные

Эти свойства устанавливают верхний, правый, нижний и левый отступ блока.

BLOCKQUOTE { padding-top: 0.3em }

'padding'
Тип значения:              <padding-width>{1,4} | inherit
Начальная величина:   не определена
Применяется:               ко всем элементам
Наследование:             нет
Процентная база:         относится к ширине объемлющего блока
Медиа:                         визуальные

Свойство 'padding' является сокращенным свойством для определения 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном и том же месте в стилевой таблице.

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

Цвет поверхности или изображение области отступа определяется через свойство 'background':

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

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