Свойство CSS Padding

Свойство CSS padding создаёт пространство внутри элемента — между его содержимым и границей. В отличие от margin, который добавляет пространство снаружи границы между соседними элементами, padding является частью самого элемента: он разделяет фон элемента и включается в область клика/наведения.

На этой странице рассматриваются четыре отдельных свойства padding, сокращённое свойство padding и все его формы записи значений (от одного до четырёх значений), допустимые единицы и проценты, а также особые случаи (проценты, box-sizing и почему padding никогда не схлопывается так, как схлопываются margin).

Отдельные стороны

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

Как можно догадаться, для верхней стороны используется padding-top, для нижней — padding-bottom, для левой — padding-left, для правой — padding-right.

Все свойства padding принимают следующие значения:

length — фиксированный размер в px, em, rem, pt, cm и т. д. (например, padding-top: 16px).
percentage (%) — padding относительно ширины содержащего блока. Важная особенность: вертикальный padding в процентах (top/bottom) тоже вычисляется от ширины контейнера, а не от его высоты. Именно это лежит в основе классического трюка с «padding-bottom в процентах» для сохранения пропорций блока.
inherit — принять вычисленное значение padding родительского элемента.

Несколько правил, которые стоит запомнить:

Padding не может быть отрицательным. Если нужно сдвинуть содержимое в другую сторону, используйте margin или transform.
Значение по умолчанию каждого свойства padding равно 0.
Padding не схлопывается. Смежные вертикальные margin могут объединяться в один (схлопывание margin), но два padding всегда суммируются — поэтому у вложенных элементов сохраняются оба значения padding.
По умолчанию padding прибавляется к объявленным width/height. Блок шириной 200px с padding: 20px будет иметь итоговую ширину 240px. Используйте box-sizing: border-box, чтобы padding вписывался внутрь объявленной ширины.

Пример использования отдельных свойств padding:

Пример использования отдельных свойств padding:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

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

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

CSS-свойство padding является сокращением для четырёх отдельных свойств:

Количество переданных значений определяет, как они распределяются по четырём сторонам:

Значения	`padding: …`	Верх	Право	Низ	Лево
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

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

Если свойство padding имеет только 1 значение, например padding: 35px, то все четыре padding равны 35px.

Пример сокращённого свойства padding с одним значением:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

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

Свойство padding может иметь 2 значения, например padding: 20px 40px, где верхний и нижний padding равны 20px, а правый и левый — 40px.

Пример CSS padding с 2 числами

p {
  padding: 20px 40px;
}

Это эквивалентно приведённому выше коду.

Пример CSS padding с 2 числами, развёрнутая запись

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

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

Пример кода CSS padding

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

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

Результат

Свойство padding может иметь 3 значения, например padding: 20px 15px 35px;, где верхний padding равен 20px, правый и левый — 15px, а нижний — 35px.

Пример CSS padding с 3 числами

p {
  padding: 20px 15px 35px;
}

Это эквивалентно приведённому выше коду.

Пример CSS padding с 3 числами, развёрнутая запись

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Пример сокращённого свойства padding с тремя значениями:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

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

И наконец, свойство padding может иметь четыре значения, например padding: 25px 50px 75px 100px;, где верхний padding равен 25px, правый — 50px, нижний — 75px, а левый — 100px.

Пример CSS padding с теми же значениями

p {
  padding: 25px 50px 75px 100px;
}

Пример сокращённого свойства padding с четырьмя значениями:

Пример сокращённого свойства padding с четырьмя значениями (верх, право, низ, лево — по часовой стрелке):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

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

Padding и margin

Padding и margin легко перепутать. Используйте padding, когда нужно добавить пространство внутри блока — между текстом и его границей или фоном. Используйте margin, когда нужно создать пространство между блоком и окружающими элементами.

Ключевые практические различия:

Padding разделяет цвет фона элемента; margin всегда прозрачен.
Padding входит в кликабельную область элемента (удобно для кнопок и ссылок); margin — нет.
Margin между соседними элементами может схлопываться; padding никогда не схлопывается.

Связанные темы

CSS margin — аналог padding снаружи границы.
CSS box-sizing — управляет тем, прибавляется ли padding к ширине элемента или вписывается внутрь неё.
padding-top, padding-right, padding-bottom, padding-left — отдельные полные свойства.

Практика

Что из перечисленного верно описывает свойство 'padding' в CSS?

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