Свойство padding: внутренние отступы
Как добавить воздух внутри карточки или кнопки и учитывать его в общей ширине.
Как это работает
padding отделяет содержимое от рамки элемента. Фон продолжается под внутренним отступом, поэтому карточка выглядит цельной. В стандартной модели content-box padding увеличивает итоговую ширину сверх указанного width.
Для предсказуемой геометрии часто задают box-sizing: border-box. Логические свойства padding-inline и padding-block описывают стороны относительно направления письма. Процентные отступы имеют особенности расчёта, поэтому для обычных карточек удобнее rem или px.
Пример в интерфейсе
.card { box-sizing: border-box; width: 100%; padding: 24px; border: 1px solid #bdd5c7; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| padding: 16px | Одинаковое внутреннее пространство. |
| padding: 12px 20px | Вертикальные и горизонтальные отступы. |
| padding-inline | Отступы вдоль строкового направления. |
| Отрицательные значения | Не допускаются. |
На что обратить внимание
Не забывайте учитывать padding у элемента с width: 100%. Без border-box карточка может стать шире контейнера.
Проверьте на практике
Задайте карточке width: 100%, затем увеличьте padding до 40px. Сравните результат с border-box и без него.
Связанные темы: box-sizing, margin.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.