MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Обзор

Свойство 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: процент, как указан, или аблосютная длина
Анимируемостьда, как длина
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Применяется для всех 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

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ?

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

Метки документа и участники

 Внесли вклад в эту страницу: Asrover, vvalgis
 Обновлялась последний раз: Asrover,