CSS свойство padding

❮ Назад Вперед ❯

Свойство padding задает отступы со всех сторон контента элемента.

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

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

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

padding-top
padding-bottom
padding-left
padding-right

Можно использовать 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";

Синтаксис

padding: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства padding</h2>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

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

Код в вышеприведенном примере означает, что отступ сверху должен быть 20px, справа - 40px, снизу - 20px, а слева - 40px.

Рассмотрим другой пример, где отступ указан в процентах:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства padding</h2>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства padding</h2>
    <p>Параграф с применением свойств background-color, color и padding.</p>
  </body>
</html>

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

Значения

Значение	Описание
length	Устанавливает отступ в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию - 0.
%	Устанавливает отступ в процентах.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.