paddingСвойство в CSS определяет самую внутреннюю часть модели коробки, создавая пространство вокруг содержимого элемента, внутри каких - либо определенных краев и / или границ.
Значения заполнения задаются с использованием длины или процента и не могут принимать отрицательные значения. Начальным значением или значением по умолчанию для всех свойств заполнения является 0.
Вот простой пример:
.box ( padding: 0 1.5em 0 1.5em; )В приведенном выше примере используется paddingсокращенное свойство, которое принимает до четырех значений, показанных здесь:
.box ( padding: || || || )Если установлено менее четырех значений, предполагается, что отсутствующие значения основаны на тех, которые определены. Например, следующие два набора правил дадут одинаковые результаты:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Таким образом, если определено только одно значение, это устанавливает для всех четырех свойств заполнения одно и то же значение:
.box ( padding: 20px; )Если заявлено три значения, то это так padding: (top) (left-and-right) (bottom);.
Любое из отдельных свойств заполнения может быть объявлено от руки, и в этом случае вы должны определить только одно значение для каждого свойства. Таким образом, предыдущий пример можно переписать следующим образом:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Расчеты заполнения и ширины элемента
Если элемент имеет указанную ширину, любое дополнение, добавленное к этому элементу, будет добавлено к общей ширине элемента. Это часто является нежелательным результатом, так как требует, чтобы ширина элемента пересчитывалась каждый раз при корректировке заполнения. (Обратите внимание, что это также происходит с высотой, но в большинстве случаев желательно не задавать высоту элемента.)
Например:
.box ( padding: 20px; width: 400px; )В этом примере, хотя .boxэлементу явно задана ширина 400 пикселей, фактическая ширина визуализируемого элемента на странице будет 440 пикселей. При этом учитывается не только ширина 400 пикселей, но также 20 пикселей левого отступа и 20 пикселей правого отступа (определено сокращенным отступом в предыдущем примере).
Это происходит для того, чтобы сохранить пространство содержимого 400 пикселей, а не 400 пикселей общей ширины элемента. Вот ручка, демонстрирующая это:
Это происходит во всех используемых браузерах в стандартном режиме, но не происходит в IE6 и IE7 в режиме совместимости (то есть на страницах, отображаемых в IE6 или IE7, где не объявлен тип документа или где что-то еще происходит, чтобы вызвать причуды. Режим).
Чтобы решить эту проблему, сохранив ширину 400 пикселей независимо от количества отступов, вы можете использовать box-sizingсвойство:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Это заставляет элемент сохранять свою ширину при увеличении заполнения, таким образом уменьшая доступное пространство содержимого. Вот демонстрация:
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ага | Ага | Ага | Ага | Ага | Ага | Ага |