Свойство CSS padding

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

Значения padding задаются с помощью длин или процентов.

INFO

Отрицательные значения недопустимы.

CSS свойство padding является сокращением для следующих свойств:

Свойство padding можно использовать для всех сторон (верх, низ, лево, право).

Свойство padding может быть задано одним, двумя, тремя или четырьмя значениями:

При указании четырёх значений первое задаёт верхнюю сторону, второе — правую, третье — нижнюю, а четвёртое — левую.
При указании трёх значений первое задаёт верхнюю сторону, второе — правую и левую, а третье — нижнюю.
При указании двух значений первое задаёт верхнюю и нижнюю стороны, а второе — правую и левую.
Если padding имеет только одно значение, оно применяется ко всем четырём сторонам

Начальное значение	0
Применяется к	Ко всем элементам, кроме случаев, когда свойство display установлено в table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Да. Отступы можно анимировать.
Версия	CSS1
Синтаксис DOM	object.style.padding = "30px";

Синтаксис

Синтаксис свойства CSS padding

css

padding: length | initial | inherit;

Пример свойства padding:

Пример свойства CSS padding с четырьмя значениями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        padding: 15px 30px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Try it Yourself »

В приведённом примере этот код означает, что отступ сверху должен быть 15px, справа — 30px, снизу — 20px, а слева — 40px.

Пример свойства padding со значением "%":

Пример свойства CSS padding со значением %

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Try it Yourself »

В примере ниже указаны два значения. Первое значение задаёт верхнюю и нижнюю стороны, а второе — правую и левую:

Пример свойства padding с двумя значениями:

Пример свойства CSS padding с двумя значениями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS Padding

Значения

Значение	Описание	Запустить
length	Задаёт отступ в px, pt, cm и т. д. Значение по умолчанию — 0.	Запустить »
%	Задаёт отступ в % от размера содержащего элемента.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Practice

Какие функции выполняет padding в CSS?

Он создаёт дополнительное пространство внутри элемента.Он окрашивает фон элемента.Он используется для установки стиля фона элемента.Он отделяет содержимое элемента от его границы.Он используется для установки стиля шрифта элемента.

Свойство CSS padding ​

Синтаксис ​

Пример свойства padding: ​

Пример свойства padding со значением "%": ​

Пример свойства padding с двумя значениями: ​

Результат ​

Значения ​

Practice ​

Свойство CSS padding

Синтаксис

Пример свойства padding:

Пример свойства padding со значением "%":

Пример свойства padding с двумя значениями:

Результат

Значения

Practice