CSS свойство padding
Узнайте, как CSS свойство padding добавляет пространство внутри границы элемента. Краткая запись, правила одного-четырёх значений, проценты и особенности.
Свойство padding добавляет пространство между содержимым элемента и его границей. В отличие от margin, который отодвигает элементы друг от друга снаружи, padding работает изнутри — он увеличивает кликабельную или видимую область элемента, сохраняя границу на месте.
Значения padding задаются в единицах длины или процентах и всегда неотрицательны.
Отрицательные значения для padding не допускаются. Используйте отрицательный margin, если нужно сдвинуть содержимое внутрь.
padding — это сокращённое свойство, устанавливающее все четыре стороны сразу. Вы также можете управлять каждой стороной отдельно:
Место padding в блочной модели
Каждый HTML-элемент обёрнут в CSS блочную модель: содержимое → padding → граница → margin, изнутри наружу. Padding располагается между областью содержимого и границей, поэтому он является частью фоновой области элемента.
Когда вы задаёте box-sizing: border-box (современное значение по умолчанию в большинстве сбросов стилей), padding включается в объявленные width и height. При устаревшем box-sizing: content-box padding добавляется поверх этих размеров. Подробнее см. в box-sizing.
Справочник свойства
| Начальное значение | 0 |
| Применяется к | Всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируется | Да |
| Версия | CSS1 |
| DOM-синтаксис | element.style.padding = "30px" |
Синтаксис
padding: <length> | <percentage> | initial | inherit;Правило одного-четырёх значений
Сокращённое свойство принимает одно, два, три или четыре значения, разделённых пробелами. Соответствие следует порядку по часовой стрелке: верх → право → низ → лево.
| Заданные значения | Верх | Право | Низ | Лево |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Полезное правило для запоминания: пропущенные значения зеркалируют противоположную сторону (лево зеркалирует право; низ зеркалирует верх).
Примеры
Четыре значения (верх / право / низ / лево)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Абзац получает 15 пкс сверху, 30 пкс справа, 20 пкс снизу и 40 пкс слева.
Процентные значения
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Процентные значения padding — включая padding-top и padding-bottom — всегда вычисляются относительно ширины содержащего блока, а не его высоты. Это позволяет легко создавать блоки с фиксированным соотношением сторон: блок с padding-top: 56.25% сохраняет соотношение 16:9 независимо от своей ширины.
Два значения (вертикальное / горизонтальное)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px устанавливает 20 пкс сверху и снизу, 40 пкс слева и справа — компактный способ применить симметричные отступы.
Значения
| Значение | Описание |
|---|---|
length | Фиксированный размер в любых единицах длины CSS: px, em, rem, pt, cm и др. По умолчанию 0. |
% | Процент от ширины содержащего блока (применяется ко всем четырём сторонам). |
initial | Сбрасывает свойство до значения по умолчанию (0). |
inherit | Наследует вычисленное значение от родительского элемента. |
Логические свойства (с учётом режима записи)
Для интернационализированных макетов с поддержкой вертикального или письма справа налево физические стороны padding-top/right/bottom/left могут казаться некорректными. CSS предоставляет логические свойства, учитывающие направление письма:
| Логическое свойство | Соответствует в горизонтальном LTR |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Сокращёнными эквивалентами являются padding-block и padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Они поддерживаются во всех современных браузерах и предпочтительны в библиотеках компонентов с поддержкой двунаправленного текста.
Распространённые случаи использования и особенности
Кликабельная область. Поскольку padding является частью фонового и обрабатывающего события региона элемента, увеличение его на кнопке или ссылке делает цель более удобной для нажатия — прямое преимущество для мобильной доступности.
Padding на строчных элементах. Горизонтальный padding на строчных элементах (например, <span>) работает ожидаемо. Вертикальный padding применяется визуально, но не раздвигает окружающие строки; используйте блочный или строчно-блочный элемент, если вам нужен вертикальный ритм.
Padding vs. margin. Используйте padding, когда хотите, чтобы цвет фона или граница покрывали дополнительное пространство. Используйте margin, когда пространство должно быть прозрачным и находиться за пределами границы.
Взаимодействие с box-sizing. При content-box добавление padding делает элемент визуально больше. При border-box padding поглощается внутри объявленной ширины, обеспечивая предсказуемость макета. См. box-sizing.
Таблицы. Сокращённое свойство padding не влияет на строки таблицы или группы столбцов. Используйте padding для ячеек <td> и <th>, или применяйте border-spacing для промежутков между ячейками.