padding

Обзор

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.

Cвойство 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.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значениякак и у каждого из подсвойств этого свойства:
  • padding-bottom: процент, как указан, или аблосютная длина
  • padding-left: процент, как указан, или аблосютная длина
  • padding-right: процент, как указан, или аблосютная длина
  • padding-top: процент, как указан, или аблосютная длина
Animation typeдлина

Синтаксис

/* Применяется для всех 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: 5%;                /*  со всех сторон отступ 5% */
 padding: 10px;              /*  со всех сторон отступ 10px */
 padding: 10px 20px;         /*  сверху и снизу отступ 10px */
                             /*  слева и справа отступ 20px */
 padding: 10px 3% 20px;      /*  сверху отступ 10px       */
                             /*  слева и справа отступ 3% */
                             /*  снизу отступ 20px        */
 padding: 1em 3px 30px 5px;  /*  сверху отступ 1em   */
                             /*  справа отступ 3px   */
                             /*  снизу отступ 30px   */
                             /*  слева отступ 5px    */

border:outset; padding:5% 1em;

Рабочий пример

HTML

<h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>

CSS

h4{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

Live Sample Link

Спецификации

Спецификация Состояние Комментарий
CSS Basic Box Model
Определение 'padding' в этой спецификации.
Кандидат в рекомендации No change
CSS Level 2 (Revision 1)
Определение 'padding-top' в этой спецификации.
Рекомендация No change
CSS Level 1
Определение 'padding' в этой спецификации.
Рекомендация Initial definition

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также