padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Обзор
Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.
Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).
| Начальное значение | как и у каждого из подсвойств этого свойства: |
|---|---|
| Применяется к | все элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Это также применяется к ::first-letter и ::first-line. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | длина |
Синтаксис
css
/* Применяется для всех 4 сторон */
padding: 1em;
/* По вертикали | По горизонтали */
padding: 5% 10%;
/* Сверху | По горизонтали | Снизу */
padding: 1em 2em 2em;
/* Сверху | Справа | Снизу | Слева */
padding: 2px 1em 0 1em;
/* Глобальные значения */
padding: inherit;
padding: initial;
padding: unset;
Значения
Укажите одно, два, три или четыре следующих значения:
<length>-
Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе
<length>. <percentage>-
Относительно ширины родительского блока.
- Одно значение применяется ко всем четырём сторонам
- Два значения применяются: 1. верхняя и нижняя и 2. левая и правая стороны
- Три значения применяются: 1. верхняя, 2. левая и правая и 3. нижняя стороны
- Четыре значения применяются**:** 1. верхняя, 2. правая, 3. нижняя и 4. левая стороны
Формальное описание синтаксиса
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Примеры
css
padding: 5%; /* со всех сторон отступ 5% */
css
padding: 10px; /* со всех сторон отступ 10px */
css
padding: 10px 20px;
/* сверху и снизу отступ 10px */
/* слева и справа отступ 20px */
css
padding: 10px 3% 20px;
/* сверху отступ 10px */
/* слева и справа отступ 3% */
/* снизу отступ 20px */
css
padding: 1em 3px 30px 5px;
/* сверху отступ 1em */
/* справа отступ 3px */
/* снизу отступ 30px */
/* слева отступ 5px */
border:outset; padding:5% 1em;
Рабочий пример
HTML
html
<h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>
CSS
css
h4 {
background-color: green;
padding: 50px 20px 20px 50px;
}
h3 {
background-color: blue;
padding: 400px 50px 50px 400px;
}
Спецификации
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |
Совместимость с браузерами
BCD tables only load in the browser