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

Примеры

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

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