Справочник · CSS

padding: внутренний отступ

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

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

Минимальный пример

.card { padding: 24px; }
.button { padding: 12px 18px; }

Текст карточки отходит от краёв на 24px со всех сторон. У кнопки внутренние поля 12px сверху и снизу и 18px по бокам: фон кнопки растёт вместе с ними, и по ней легче попасть пальцем.

Запись сторон

Отдельные стороны: padding-top, padding-right, padding-bottom, padding-left.

padding-inline и padding-block

.card {
  padding-block: 24px;   /* сверху и снизу в русском тексте */
  padding-inline: 20px;  /* слева и справа */
}

Логические свойства описывают отступы относительно направления текста: inline — вдоль строки, block — поперёк. Для русского и английского это горизонталь и вертикаль, а для арабского или вертикального письма стороны поменяются сами. Записывать ими удобно и в обычных проектах: одна строка вместо двух.

padding и ширина элемента

*, *::before, *::after { box-sizing: border-box; }

.field {
  width: 100%;
  padding: 12px;
}

По умолчанию padding добавляется к ширине: поле с width: 100% и отступом 12px получится на 24px шире родителя и вылезет. С box-sizing: border-box отступы и рамка входят в заданную ширину. Это правило ставят на весь сайт первой строкой. Подробнее — на странице box-sizing.

Проценты и пропорциональные блоки

.video-wrap {
  position: relative;
  padding-top: 56.25%;   /* 9 / 16 = 0.5625 — старый приём для 16:9 */
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* современный способ */
.video { aspect-ratio: 16 / 9; width: 100%; }

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

Адаптивный отступ

.section { padding-block: clamp(40px, 8vw, 96px); }
.container { padding-inline: max(16px, 4vw); }

Большой фиксированный отступ, удобный на мониторе, съедает половину экрана телефона. clamp(минимум, желаемое, максимум) делает отступ плавным: на телефоне 40px, на широком экране до 96px, без медиазапросов.

padding у строчных элементов

mark { padding: 2px 4px; }          /* по бокам раздвигает, сверху и снизу наезжает */
a.button { display: inline-block; padding: 10px 16px; }

У строчных элементов (a, span, mark) горизонтальный padding раздвигает соседей, а вертикальный рисуется, но не сдвигает строки: фон наезжает на текст выше и ниже. Чтобы ссылка стала полноценной кнопкой с отступами, сделай её inline-block или block.

Зона нажатия

padding — лучший способ увеличить кнопку и ссылку под палец, не меняя размер шрифта. Ориентир — не меньше 44×44 пикселей у важных элементов. Большой margin вокруг маленькой ссылки не помогает: пустота снаружи не кликабельна, а padding — часть элемента.

padding или margin

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

• Используют padding для расстояния между карточками вместо margin или gap.
• Не ставят box-sizing: border-box, и поле с width: 100% вылезает.
• Оставляют огромный фиксированный отступ на телефоне.
• Пытаются задать отрицательный padding — такое значение недопустимо.
• Добавляют вертикальный padding строчной ссылке и ждут сдвига строк.

Доступность

Достаточный padding у кнопок и ссылок увеличивает зону нажатия — это требование удобства для людей с моторными трудностями и для всех на телефоне. Внутренние отступы в полях формы делают вводимый текст читаемым. Задавай отступы в rem или em, если хочешь, чтобы они росли вместе с размером шрифта.

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

padding работает во всех браузерах. Логические padding-inline и padding-block, а также clamp() и aspect-ratio поддерживаются актуальными версиями браузеров.

*, *::before, *::after { box-sizing: border-box; }
.button { padding: 12px 20px; }
.card { padding: clamp(16px, 4vw, 32px); }
.field { width: 100%; padding: 12px; }
a.more { display: inline-block; padding: 8px 14px; }