padding

Пример

<button class="button" type="button">Отправить</button>

.button {
  padding: 0.75rem 1.5rem;
  color: white;
  background: teal;
  border: 0;
}

Синтаксис

padding: <'padding-top'>{1,4};

Начальное значение

0

Применяется к

всем элементам, кроме внутренних элементов таблиц (кроме ячеек)

Наследуется

нет

Анимируется

как длина

Вычисляемое значение

как у отдельных свойств padding-top, padding-right, padding-bottom, padding-left

Как и у margin, число значений определяет стороны: одно — все четыре, два — вертикаль и горизонталь, три — верх, горизонталь и низ, четыре — по часовой стрелке, начиная сверху.

padding: 1rem;
padding: 0.5rem 1rem;
padding: 0.5rem 1rem 2rem;
padding: 0.5rem 1rem 2rem 0;

Значения

Длина

Отступ в любых единицах: 8px, 1rem, 0.5em. Отрицательные значения запрещены.

Процент

Процент от ширины содержащего блока — для всех четырёх сторон.

Как понять

Представьте картину в раме. Картина — содержимое, паспарту вокруг неё — внутренний отступ, багет — рамка (border), расстояние до соседней картины на стене — внешний отступ (margin). Фон элемента заливает содержимое и padding, но не margin.

По умолчанию padding добавляется к ширине: блок width: 200px с padding: 20px займёт 240 пикселей. Чтобы поля помещались внутрь заданной ширины, нужен box-sizing: border-box.

Примеры

Кликабельная область ссылки

Поля увеличивают область, по которой можно попасть курсором или пальцем, не меняя размер текста:

<nav class="tabs">
  <a href="#">Обзор</a>
  <a href="#">Цены</a>
  <a href="#">Отзывы</a>
</nav>

.tabs a {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #eef;
}

Блок с пропорциями через проценты

Процентный padding считается от ширины, поэтому раньше им делали блоки с заданными пропорциями. Сегодня для этого есть aspect-ratio, но приём встречается в старом коде:

<div class="ratio"></div>

.ratio {
  width: 60%;
  padding-top: 56.25%; /* 9 / 16 */
  background: lightsteelblue;
}

Подсказки

• Отрицательный padding недопустим — объявление с ним браузер отбросит целиком.
• У строчных элементов вертикальные поля рисуются, но не раздвигают строки: фон может наехать на соседние строки текста.
• Логические свойства padding-block и padding-inline задают поля по блочной и строчной оси с учётом направления письма.
• Чтобы размеры не «разъезжались» от полей, многие проекты ставят box-sizing: border-box всем элементам.