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 Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Какие значения может принимать свойство padding в CSS?
Считаете ли это полезным?