Вы здесь

CSS свойство padding

Универсальное свойство, которое позволяет устанавливать размер всех полей элемента за одну декларацию. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Свойство 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;
}