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.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
  • 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. левая стороны

Формальное описание синтаксиса

[ <length> | <percentage> ]{1,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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
paddingChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
 

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