Исполняемые доки CSS: Padding в CSS

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

По часовой стрелке от верха: padding: top right bottom left;. С тремя значениями это верх, лево и право, низ; с двумя верх и низ, затем лево и право; с одним все четыре стороны.

Q: Увеличивает ли padding размер элемента?

С box-sizing: content-box по умолчанию да: padding прибавляется к width и height. С box-sizing: border-box padding берется изнутри ширины, и элемент сохраняет заданный размер.

Q: От чего считается padding в процентах?

От ширины содержащего блока, для всех четырех сторон. padding-top: 50% это половина ширины родителя, а не его высоты; поэтому старые трюки с соотношением сторон использовали вертикальный padding.

Q: Как задать padding в HTML?

Через CSS, в таблице стилей или атрибуте style: . У обычных элементов HTML нет атрибута padding; старый атрибут cellpadding у таблиц устарел, вместо него используют padding на td и th.

Что такое padding

Padding это пространство внутри элемента, между его содержимым и рамкой. На нем виден фон элемента, поэтому именно это свойство дает кнопке, карточке или бейджу «дышать».

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Синяя область это содержимое. Зеленая полоса вокруг это 24px padding с каждой стороны, а рамка находится снаружи.

Сокращенная запись padding: 1, 2, 3 или 4 значения

padding задает все четыре стороны одним объявлением. Количество значений определяет, какая сторона что получит, по часовой стрелке от верха:

Объявление	Верх	Право	Низ	Лево
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Два значения означают «по вертикали, по горизонтали». Три значения: «верх, по горизонтали, низ». Четыре идут по часовой стрелке: верх, право, низ, лево (по-английски это запоминают как TRouBLe: top, right, bottom, left).

Введите любую сокращенную запись ниже. Блок перерисуется, а браузер покажет, что получила каждая сторона:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте 8px, 8px 24px, 0 0 40px и 1em 5%. Невалидное значение, например -10px, игнорируется, и блок сохраняет последний валидный padding.

По одной стороне

У каждой стороны есть свое свойство, и оно понятнее записи из четырех значений, когда нужно изменить только одну:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Сокращенная запись и следом одна сторона это частый прием: задать все, а потом поправить одну сторону.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Порядок здесь важен: сокращенная запись padding после padding-bottom вернула бы низ к 16px.

Логический padding: padding-inline и padding-block

padding-left и padding-right физические: они остаются на той же стороне на любом языке. Логические свойства следуют направлению письма, а это то, что нужно сайту, который показывается и справа налево:

Логическое свойство	В русском (слева направо)	В арабском (справа налево)
`padding-inline-start`	слева	справа
`padding-inline-end`	справа	слева
`padding-inline`	слева и справа	справа и слева
`padding-block`	сверху и снизу	сверху и снизу

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding увеличивает блок (кроме border-box)

По умолчанию width это ширина только содержимого, и padding добавляется сверху. Блок с width: 200px и padding: 20px будет шириной 240px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box оставляет блок шириной 200px и берет padding изнутри. Полный расчет описан на странице про блочную модель.

Padding в процентах

Padding в процентах отсчитывается от ширины родителя, для всех четырех сторон, включая верх и низ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Отсюда и старый трюк «padding-top: 56.25%» для видеоблоков 16:9. Сегодня ту же задачу напрямую решает aspect-ratio: 16 / 9.

Padding у кнопок и ссылок

Padding это правильный способ сделать ссылку или кнопку больше, потому что он часть элемента, а значит, и часть области, по которой можно кликнуть или нажать пальцем. Margin добавил бы пространство, но не увеличил бы цель.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Какие значения принимает padding

Значение	Пример	Примечание
Длина	`12px`, `1rem`, `0.5em`	`em` масштабируется с размером шрифта элемента
Проценты	`5%`	От ширины содержащего блока
`0`	`padding: 0`	Единица не нужна
Отрицательное	`-10px`	Невалидно, игнорируется
`auto`	`auto`	Для padding невалидно (для margin работает)

Частые ошибки

Неправильный порядок в записи из четырех значений. Верх, право, низ, лево, по часовой стрелке.
Блок растет, когда добавляете padding. Задайте box-sizing: border-box.
Padding для разделения двух элементов. Пространство между элементами это margin; padding это пространство внутри одного. Смотрите margin и padding: разница.
Вертикальный padding у строчной ссылки, который наезжает на другие строки. Сделайте ее inline-block.
Отрицательный padding или padding: auto. Оба невалидны и молча игнорируются.

Часто задаваемые вопросы

Что такое padding в CSS?

Padding это пространство между содержимым элемента и его рамкой. Оно принадлежит элементу, поэтому на нем виден цвет фона элемента, и оно увеличивает кликабельную область ссылки или кнопки.

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

По часовой стрелке от верха: padding: top right bottom left;. С тремя значениями это верх, лево и право, низ; с двумя верх и низ, затем лево и право; с одним все четыре стороны.

Увеличивает ли padding размер элемента?

С box-sizing: content-box по умолчанию да: padding прибавляется к width и height. С box-sizing: border-box padding берется изнутри ширины, и элемент сохраняет заданный размер.

От чего считается padding в процентах?

От ширины содержащего блока, для всех четырех сторон. padding-top: 50% это половина ширины родителя, а не его высоты; поэтому старые трюки с соотношением сторон использовали вертикальный padding.

Может ли padding быть отрицательным?

Нет. Отрицательное значение padding невалидно, и объявление игнорируется. Чтобы вытянуть содержимое наружу, используйте отрицательный margin.

Как задать padding в HTML?

Через CSS, в таблице стилей или атрибуте style: <div style="padding: 16px;">. У обычных элементов HTML нет атрибута padding; старый атрибут cellpadding у таблиц устарел, вместо него используют padding на td и th.

Связанные концепции