Общее свойство отступов: padding

padding

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 3.5 1.0
Свойство
padding — это сокращенное свойство для отступов
Описание
Для того чтобы не задавать каждый отступ по отдельности существует возможность задать сразу все отступы. В качестве значения свойство padding может принимать от одного до четырех отступов.


запись padding: 5px; равноценна записи padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;
padding-one
Цифра 1 означает что одно значение, указанное в свойстве padding, применяется ко всем четырем сторонам


запись padding: 5px 9px; равноценна записи padding-top: 5px; padding-bottom: 5px; padding-left: 9px; padding-right: 9px;
padding-two
Цифра 1 соответствует первому значению в свойстве padding, а цифра 2 — второму значению


запись padding: 5px 9px 16px; равноценна записи padding-top: 5px; padding-right: 9px; padding-left: 9px; padding-bottom: 16px;
padding-three
Цифра 1 соответствует первому значению в свойстве padding, цифра 2 — второму значению, а цифра 3 — третьему значению


запись padding : 5px 9px 16px 11px; равноценна записи padding-top: 5px; padding-right: 9px; padding-bottom: 16px; padding-left: 11px;
padding-four
Цифра 1 соответствует первому значению в свойстве padding, цифра 2 — второму значению, цифра 3 — третьему значению, а цифра 4 — четвертому значению

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам кроме табличных
Может принимать значения
padding-top | padding-right | padding-bottom | padding-left
Значение по умолчанию
0 — для каждого значения
Правила записи
свойство: значение;
Примеры

<p>

Это правило применит отступ ко всем сторонам элемента равный 40px

</p>

<p>

Это правило применит отступ к верхней и нижней стороне элемента отступ равный 40px, а к левой и правой стороне элемента отступ равный 10px

</p>

<p>

Это правило применит отступ к верхней стороне элемента отступ равный 40px, к левой и правой стороне элемента отступ равный 10px, а к нижней стороне элемента отступ равный 20px

</p>

<p>

Это правило применит отступ к верхней стороне элемента отступ равный 40px, к правой стороне элемента отступ равный 10px, к нижней стороне элемента отступ равный 20px, а к левой стороне элемента отступ равный 30px

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться