Свойство CSS padding

Определение и использование

Сокращенное свойство padding устанавливает все свойства внутреннего отступа в одном заявлении.

Описание

Эта сокращенная свойство устанавливает ширину всех внутренних отступов элемента или ширину отступов каждой стороны. Внутренние отступы, установленные для инлайн-нереplaced элементов, не влияют на вычисление высоты строки; поэтому, если у элемента есть как отступы, так и фоновое изображение, они могут визуально распространяться на другие строки и возможно перекрываться с другим содержимым. Фон элемента распространяется через отступы. Запрещается указывать отрицательные значения отступов.

Комментарий:Запрещается использовать отрицательные значения.

Пример 1

padding:10px 5px 15px 20px;
  • Верхний отступ равен 10px
  • Правый отступ равен 5px
  • Нижний отступ равен 15px
  • Левый отступ равен 20px

Пример 2

padding:10px 5px 15px;
  • Верхний отступ равен 10px
  • Правый и левый отступы равны 5px
  • Нижний отступ равен 15px

Пример 3

padding:10px 5px;
  • Верхний и нижний отступы равны 10px
  • Правый и левый отступы равны 5px

Пример 4

padding:10px;
  • Все 4 отступа равны 10px

См. также:

Уроки CSS:Внутренний отступ CSS

Руководство по HTML DOM:Свойство padding

Пример

Установите 4 отступа для элемента p:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

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

CSS синтаксис

padding: length|initial|inherit;

Значение свойства

Значение Описание
auto Браузер вычисляет отступы.
length Определяет значение отступа в конкретных единицах измерения, таких как пиксели, сантиметры и т.д. Значением по умолчанию является 0px.
% Определяет отступы в процентах от ширины родительского элемента.
inherit Определяет, что отступы должны наследоваться от родительского элемента.

Технические детали

Значение по умолчанию: 0
Ингерит: нет
Версия: CSS1
JavaScript синтаксис: object.style.padding="10px 5px"

Пример на TIY

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

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5