Веб-школа



Padding — свойство CSS, задающее свободное пространство между границей элемента (border) и его содержимым (контент).

Padding (поля)

Свойство padding «очищает» территорию вокруг содержимого элемента (внутри границы элемента). Padding (поля) окрашиваются в цвет фона элемента.

Значения каждого поля можно задавать независимо от других, используя для этого соответствующие свойства. Кроме того, можно задавать размеры всех полей с помощью краткой записи.

Возможные значения

Поля — разные значения для разных сторон

В CSS вы может задать различные значения для полей с разных сторон содержимого:

padding-top:25px; padding-bottom:25px; padding-right:50px;

padding-left:50px;

Padding — краткая запись

Для уменьшения размера кода вы можете задавать все поля элемента одной записью.

Краткая запись для полей элемента называется «padding»:

Свойство padding может иметь от одного до четырех значений.

• padding:25px 50px 75px 100px;
  • верхний отступ равен 25px
  • правый отступ равен 50px
  • нижний отступ равен 75px
  • левый отступ равен 100px

• padding:25px 50px 75px;
  • верхний отступ равен 25px
  • правый и левый отступы равны 50px
  • нижний отступ равен 75px

• padding:25px 50px;
  • верхний и нижний отступы равны 25px
  • правый и левый отступы равны 50px

• padding:25px;

Примеры

Краткая запись свойства padding

Левое поле элемента

Правое поле элемента

Верхнее поле элемента

Нижнее поле элемента

Все свойства padding — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).