Универсальное свойство, которое позволяет устанавливать размер всех полей элемента за одну декларацию. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Свойство padding может принимать от одного до четырех значений.
Например:
- padding: 10px 5px 15px 20px;
- верхнее поле 10px
- правое поле 5px
- нижнее поле 15px
- левое поле 20px
- padding: 10px 5px 15px;
- верхнее поле 10px
- правое и левое поля 5px
- нижнее поле 15px
- padding: 10px 5px;
- верхнее и нижнее поля 10px
- правое и левое поля 5px
- padding: 10px;
- все четыре поля 10px
Внимание: Отрицательные значения запрещены.
CSS синтаксис
padding: размер | auto | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| auto | Браузер автоматически устанавливает размер полей. |
| размер | Устанавливает размер полей в единицах CSS - пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0. |
| % | Устанавливает размер полей в процентах от ширины родительского элемента. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем размер полей параграфа со всех четырех сторон
p {
padding: 2cm 4cm 3cm 4cm;
}
