padding
Внутренний отступ между содержимым и рамкой элемента.
Синтаксис
padding: top right bottom left;Значения
| Параметр | Тип | Описание |
|---|---|---|
| length | length | Одно значение для всех сторон: `12px`. |
| two values | length | По вертикали и по горизонтали: `8px 16px`. |
| four values | length | По часовой стрелке от верхнего: `4px 8px 12px 16px`. |
Примеры
Разные внутренние отступы:
<style>
p { background: lavender; border: 1px solid slateblue; }
</style>
<p>No padding</p>
<p style="padding: 16px;">16px on every side</p>
<p style="padding: 4px 24px;">4px vertically, 24px horizontally</p>Примечания
Фон заходит под внутренний отступ, внешний остаётся прозрачным. Отрицательным внутренний отступ быть не может. Без box-sizing: border-box он увеличивает размер элемента.
См. также
- margin — Внешний отступ элемента — расстояние до соседей.
- border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- box-sizing — Входят ли в `width` и `height` внутренние отступы и рамка.
Вопросы и ответы по теме
В учебнике
- Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.