We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Обзор

Свойство 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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,