padding

Обзор

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

Cвойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).

Синтаксис

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