padding
Поддержка браузерами
12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство padding устанавливает расстояние (его также называют "внутренний отступ") между внутренним краем рамки элемента и его содержимым. Обратите внимание, что добавление внутренних полей будет влиять на общий размер элемента.
Свойство padding обеспечивает краткий метод установки значений сразу нескольких свойств внутреннего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внутренний отступ устанавливается начиная с верхней позиции:
Визуальный эффект зависит от количества заданных значений:
Количество значений | Результат |
---|---|
4 значения | Значения устанавливаются сразу для четырех внутренних полей. В этом случае они будут идти в определенном порядке: первое значение относится к верхнему полю, второе к правому, третье к нижнему, четвертое к левому. |
3 значения | Первое значение устанавливает внутреннее поле сверху, второе — одновременно слева и справа, а третье — снизу. |
2 значения | Первое значение устанавливает внутренние поля сверху и снизу, второе — слева и справа от содержимого. |
1 значение | Поля будут установлены одновременно со всех сторон, при этом ширина всех полей будет одинаковая. |
Отрицательные значения внутренних полей не допускаются.
Имейте ввиду, когда вертикальный внутренний отступ используется для строчного элемента, это может вызвать перекрытие элементов, расположенных выше или ниже этого элемента, в тех случаях, когда внутренний отступ элемента превышает высоту строки.
Примечание: для установки внутренних полей отдельно для каждой стороны элемента, используйте следующие свойства: padding-top, padding-bottom, padding-left, padding-right.
Значение по умолчанию: | 0 |
---|---|
Применяется: | ко всем элементам кроме тех, которые относятся к типу display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.padding="10px 5px" |
Синтаксис
padding: [размер | проценты] {1 ... 4} | inherit;
Значения свойства
Значение | Описание |
---|---|
размер | Определяет размер внутреннего поля в единицах измерения, используемых в CSS. |
% | Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
background-color: yellow;
width: 100px;
padding: 0px;
}