Свойство padding задаёт расстояние – иногда его называют «внутренним отступом» – между внутренней границей рамки элемента и его содержимым. Учтите, что добавление внутренних полей увеличивает общий размер блока.
Это свойство позволяет одновременно задать величины для всех четырёх сторон в одном объявлении. Вы можете указать от одного до четырёх числовых значений, разделённых пробелами. Если передаётся более одного значения, отступ начинается с верхней границы:
Визуальный результат зависит от количества заданных параметров:
| Кол-во значений | Результат |
|---|
| 4 значения | Устанавливаются сразу для всех четырёх внутренних полей. Порядок: верх, право, низ и лево. |
| 3 значения | Первое – сверху; второе – одновременно слева и справа; третье – снизу. |
| 2 значения | Первое – верх и низ; второе – левый и правый края. |
| 1 значение | Отступ одинаков по всем сторонам, ширина фиксирована. |
Нельзя задавать отрицательные значения для внутренних полей.
Обратите внимание: при применении вертикального отступа к строчному элементу может возникнуть перекрытие соседних строк, если padding превышает высоту строки.
Примечание: Чтобы задать внутренние поля отдельно для каждой стороны, используйте свойства padding-top, padding-right, padding-bottom и padding-left.
| Значение по умолчанию: | 0 |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.padding="10px 5px" |
Синтаксис и значения свойства
padding: [размер | проценты] {1 ... 4} | inherit; | Значение | Описание |
| размер | Указывает величину внутреннего поля в поддерживаемых единицах CSS. |
| % | Определяет отступ как процент от ширины родительского элемента. |
| inherit | Наследует значение от родителя. |
Пример