CSS padding (заполнение)

CSS padding — это сокращённое свойство, которое определяет пространство между границей элемента и его содержимым, то есть внутренние отступы сверху, справа, снизу и слева.

padding (заполнение)

Когда padding элемента сбрасывается, освободившаяся область заполняется цветом фона элемента.

Использование только свойства padding позволяет изменить внутренние отступы со всех четырёх сторон.

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

Значение Описание
length Определяет фиксированный внутренний отступ (pixels, pt, em и т. д.)
% Задаёт padding с использованием процентных значений

Padding — свойства padding для отдельных сторон

В CSS можно указать разные значения padding для разных сторон:

Пример

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

Попробуйте сами »
  • Верхний внутренний отступ равен 25px
  • Правый внутренний отступ равен 50px
  • Нижний внутренний отступ равен 25px
  • Левый внутренний отступ равен 50px

Padding — сокращённые свойства

Чтобы сократить код, можно указать все свойства padding в одном свойстве.

Это называется сокращённым свойством. Сокращённое свойство для всех свойств padding:padding :

Пример

padding:25px 50px;

Попробуйте сами »

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

  padding:25px 50px 75px 100px;

  • Верхний внутренний отступ равен 25px
  • Правый внутренний отступ равен 50px
  • Нижний внутренний отступ равен 75px
  • Внутренний отступ слева равен 100px

  padding:25px 50px 75px;

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

  padding:25px 50px;

  • Внутренние отступы сверху и снизу равны 25px
  • Внутренние отступы слева и справа равны 50px

  padding:25px;

  • Все внутренние отступы равны 25px
Examples

Другие примеры

Все свойства padding в одном объявлении
В этом примере показано, как использовать сокращённое свойство, чтобы задать все свойства padding в одном объявлении, которое может содержать от одного до четырёх значений.

Установить внутренний отступ слева
В этом примере показано, как установить внутренний отступ слева у элемента.

Установить внутренний отступ справа
В этом примере показано, как установить внутренний отступ справа у элемента.

Установить внутренний отступ сверху
Этот пример показывает, как задать верхний внутренний отступ элемента.

Установить нижний внутренний отступ
Этот пример показывает, как задать нижний внутренний отступ элемента.

Все CSS-свойства padding

Свойство Описание
padding Используйте сокращённое свойство, чтобы задать все свойства padding в одном объявлении.
padding-bottom Задайте нижний внутренний отступ элемента.
padding-left Задаёт левый внутренний отступ элемента
padding-right Задаёт правый внутренний отступ элемента
padding-top Задаёт верхний внутренний отступ элемента.
Другие расширения