padding
Обзор
Свойство 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