Padding в CSS — это внутренние отступы, которые создают пространство между содержимым элемента и его границей. Они делают интерфейс более удобным, читаемым и эстетичным, а также помогают управлять размерами и расположением элементов.
Сегодня разберём, как работает инструмент padding, как правильно его использовать и какие трюки с ним можно провернуть — от адаптивных отступов до создания пропорциональных блоков без JavaScript.
Обзор
Вёрстка — это не просто расстановка элементов на странице, а ещё и управление пространством между ними. Именно отступы делают интерфейс удобным и сбалансированным, а padding — один из главных инструментов для этого.
Каждый элемент на веб-странице — это блок, у которого есть несколько слоёв. Они формируют бокс-модель — систему, которая определяет, как рассчитываются размеры элементов:
- Содержимое (content) — текст, картинка или что-то ещё внутри элемента.
- Padding — внутренний отступ, который создаёт пространство между контентом и границей (border).
- Border — рамка вокруг элемента (может быть нулевой, но технически она всегда есть).
- Margin — внешний отступ, который создаёт пространство между этим элементом и другими. Про него поговорим подробно в следующий раз.
Главное отличие padding от margin в том, что padding работает внутри элемента, а margin — снаружи, отделяя элементы друг от друга.
Чтобы лучше понять, как это всё устроено, можно открыть DevTools в браузере и изучить какой-то конкретный элемент:
- Правый клик → Inspect (просмотреть код).
- В панели Elements выбрать нужный элемент.
- Внизу (или справа) будет бокс-модель, где наглядно показаны padding, margin и border.
Padding элемента можно менять прямо в DevTools и сразу видеть, как он влияет на страницу — padding будет подсвечиваться зелёным:
С бокс-моделью разобрались, теперь посмотрим, как это всё работает в реальности.
Что такое Padding в CSS
Допустим, на странице есть текстовый блок, но текст слишком плотно прижат к краям. Это выглядит неаккуратно и плохо читается. Или, например, есть кнопка без отступов — кликать по ней неудобно, потому что палец или курсор почти не попадают в зону клика.
Тогда к элементу применяют свойство padding, которое создаёт пространство внутри элемента, отделяя его содержимое от границ (border).
В дизайне padding очень важен, поскольку:
- Делает текст более читаемым, создавая вокруг него «воздух».
- Улучшает внешний вид элементов, делая их визуально сбалансированными.
- Увеличивает площадь клика у кнопок и ссылок, что особенно важно для мобильных устройств.
Даже если у элемента не задана ширина и/или высота, padding всё равно создаст пространство внутри блока.
Например:
.text-block {
background-color: #f4f4f4;
padding: 20px;
font-size: 16px;
}
Здесь padding в 20 пикселей создаёт вокруг текста «подушку» (выделено серым), которая делает текст удобнее для восприятия.
👉 Важный нюанс: padding может увеличивать размер элемента. Поэтому если у элемента задана ширина, например 400 пикселей:
.box {
width: 400px;
padding: 20px;
}то его фактическая ширина будет 440 пикселей (400px + 20px слева + 20px справа):
Так происходит, потому что по умолчанию браузеры считают, что width — это размер только контента, а padding добавляется сверху.
Синтаксис
Padding можно записывать разными способами, в зависимости от того, какие стороны элемента нужно отодвинуть от контента. Можно указать от 1 до 4 значений:
- Если 1 значение → применяется ко всем сторонам.
- Если 2 значения → top-bottom | left-right.
- Если 3 значения → top | left-right | bottom.
- Если 4 значения → top | right | bottom | left.
Каждое значение padding может быть фиксированным числом (px, em, rem, vh, vw и так далее) или процентом. Значение не может быть отрицательным. Если случайно написать padding: -10px, браузер просто проигнорирует это свойство.
Например, есть контейнер с такими паддингами:
.box {
padding: 1rem 2.5rem 1rem 1rem;
}
Здесь padding задан в rem (то есть относительных единицах), что делает отступы адаптивными для масштабирования. Значения заданы так:
- 1rem сверху;
- 2.5rem справа;
- 1rem снизу;
- 1rem слева.
Так как rem зависит от размера шрифта корневого элемента <html>, то отступы подстроятся под настройки браузера. Если по умолчанию 1rem = 16px, то здесь padding сверху и снизу будет 16px, а справа 40px.
Пример с процентными значениями
Padding можно задавать в процентах, но есть нюансы:
- Проценты по горизонтали — считаются от ширины блока.
- Проценты по вертикали — тоже считаются от ширины блока (а не от высоты, как можно было бы подумать).
Почему так? Потому что ширина блока зафиксирована браузером, а высота меняется в зависимости от содержимого.
Можно комбинировать процентные значения с фиксированными:
padding: 10px 5%;
Здесь сверху и снизу будет 10px, а слева и справа — 5% от ширины блока. Удобно для адаптивности.
Примеры с разными значениями
Устанавливаем отступ 20px со всех четырёх сторон (сверху, снизу, слева, справа):
/* с одним значением */
.box {
/* все отступы одинаковые */
padding: 20px;
}
/* с двумя значениями */
.box {
/* 10px сверху и снизу, 20px слева и справа */
padding: 10px 20px;
}
/* с тремя значениями */
.box {
/* 10px сверху, 20px слева и справа, 30px снизу */
padding: 10px 20px 30px;
}
/* с четырьмя значениями */
.box {
/* 10px сверху, 15px справа, 20px снизу, 25px слева */
padding: 10px 15px 20px 25px;
}
Свойства Padding
В padding можно управлять отступами по каждой стороне отдельно, используя следующие свойства:
.box {
/* Отступ сверху */
padding-top: 10px;
/* Отступ справа */
padding-right: 20px;
/* Отступ снизу */
padding-bottom: 15px;
/* Отступ слева */
padding-left: 5px;
}
Можно комбинировать эти свойства, но обычно их заменяют сокращённой записью, где можно указать 1–4 значения. При этом отдельные свойства используют:
- Когда отступы по разным сторонам сильно отличаются.
- Когда нужно менять только один
padding, не затрагивая остальные. - В медиазапросах, когда нужно адаптировать только один из отступов.
Сокращённое свойство Padding
Когда мы записываем padding одним, двумя, тремя или четырьмя значениями — это и есть сокращённая запись.
.box {
/* Одно значение — для всех сторон */
padding: 20px;
/* Два значения — top/bottom, left/right */
padding: 10px 20px;
/* Три значения — top, left/right, bottom */
padding: 10px 15px 20px;
/* Четыре значения — top, right, bottom, left */
padding: 5px 10px 15px 20px;
}Такое сокращение заменяет длинную запись, где мы явно указываем сторону:
.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
Значения Padding
Padding может принимать следующие значения:
- Фиксированные (px) — если нужен жёстко заданный отступ, который не изменится при масштабировании.
- Процентные (%) — адаптируются к ширине родителя.
- Относительные (
em,rem) — масштабируются вместе со шрифтом. calc()— даёт динамичные отступы, комбинируя разные единицы.inherit,initial,unset— позволяют управлять паддингами более гибко при наследовании.
Рассмотрим подробнее.
Пиксели (px) — это фиксированные отступы. Они дают точный размер, не зависящий от шрифтов или других элементов, и в вёрстке используются чаще всего.
.box {
padding: 20px;
}Проценты (%) — это относительные отступы. Они задают padding в процентах от ширины родительского элемента (даже если речь про padding-top или padding-bottom). Их используют в адаптивных макетах, чтобы отступ подстраивался под размер контейнера.
.box {
padding: 5%;
}Значения em и rem — это масштабируемые отступы. Значение em зависит от размера шрифта элемента, а rem — от размера шрифта html (по умолчанию 16px). Их используют, когда padding должен масштабироваться вместе с текстом:
.box {
/* 2x размер шрифта элемента */
padding: 2em;
}Для гибкости можно смешивать единицы измерения, используя функцию calc(). Допустим, нам нужен фиксированный минимум (10px), но при этом отступ должен немного увеличиваться в зависимости от контейнера (2%), тогда можно сделать так:
.box {
padding: calc(10px + 2%);
}Наследование Padding от родительского элемента
Padding не наследуется автоматически. Но если нужно, чтобы padding у элемента был таким же, как у его родителя, то пишем так:
.child {
padding: inherit;
}Так делают, когда padding у родителя уже настроен и нет смысла дублировать значения.
Кроме этого, есть ещё 2 других значения для настройки Padding: initial и unset.
Если нужно убрать все заданные padding и вернуть стандартное поведение, то сбрасываем padding к значению по умолчанию (обычно 0) через initial:
.child {
padding: initial;
}Если же мы не знаем заранее, наследуется padding или нет, но хотим сбросить его поведение, то используем unset. Тогда, если padding наследуемый, он наследуется. Если нет — сбрасывается к initial:
.child {
padding: unset;
}Советы по использованию Padding
👉 Чтобы padding не увеличивал размеры элемента, используйте box-sizing: border-box;. Если добавить box-sizing: border-box, то width будет учитывать padding внутри себя, и элемент не будет «раздуваться». В современных проектах box-sizing: border-box; ставят для всех элементов по умолчанию:
* {
box-sizing: border-box;
}👉 Разные браузеры добавляют свои отступы к элементам, например у списков (ul), заголовков (h1) и форм. Поэтому можно использовать normalize.css, который сбрасывает нестандартные стили и делает padding предсказуемым:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css”>
👉 Если кнопка без отступов, она выглядит сжатой и неудобной. Лучше делать их не менее 10px по вертикали — так будет удобнее для клика, особенно на мобильных устройствах. Особенно это важно в кнопках, ссылках, интерактивных элементах: чем больше внутренний отступ, тем удобнее попадать мышкой и пальцем.
.button {
padding: 12px 24px;
}👉 Значения padding можно задавать в процентах, и это суперполезно для адаптива.
.container {
width: 80%;
padding: 5%;
}Здесь padding: 5% будет пропорционален ширине родителя, а не жёстко заданным пикселям. Удобно для отзывчивых каруселей, карточек, изображений, где нужно сохранять пропорции.
Примеры применения Padding
👉 Кроме увеличения кликабельной области кнопки, паддинг используют в ссылках. Иногда текст ссылки маленький, и кликать по ней неудобно, особенно на мобилках. Тогда оступ может сделать её более доступной, даже если текст короткий.
<a href="#" class="link">Ссылка 🐻</a>.link {
padding: 10px;
display: inline-block;
background-color: #f4f4f4;
text-decoration: none;
border-radius: 5px;
}Сам текст ссылки короткий, но кликабельная зона (выделено серым), увеличивается за счёт паддинга:
👉 Можно использовать padding для динамичного увеличения области вокруг текста. Это поможет, если заголовок должен адаптироваться под размер экрана.
.responsive-title {
font-size: 2rem;
/* Отступы зависят от ширины экрана */
padding: 2vw;
background: #ffcc00;
text-align: center;
}Здесь padding: 2vw; означает, что отступы будут увеличиваться или уменьшаться вместе с шириной экрана. Это позволяет адаптировать текстовый блок без жёстких фиксированных значений.
👉 Обычно padding используют для создания отступов внутри элемента, но есть и хитрый способ его применения — сохранение пропорций (aspect ratio) для адаптивного дизайна.
Вот как это сделать.В первую очередь высоту адаптивного блока ставим в 0, чтобы исключить влияние других параметров. Затем задаём padding-bottom в процентах — и его значение будет рассчитываться от ширины контейнера. Таким образом высота элемента автоматически подстраивается под ширину, сохраняя пропорции.
/* Адаптивный блок с соотношением 16 : 9 */
.aspect-box {
/* Занимает всю ширину родителя */
width: 100%;
/* Обнуляем высоту */
height: 0;
/* 9 / 16 * 100% = 56.25% */
padding-bottom: 56.25%;
background: lightblue;
position: relative;
}Значение padding-bottom: 56.25% — это то, что создаёт высоту, пропорциональную ширине.
Но есть нюанс: весь контент прижимается вверх, поэтому внутри нужен дополнительный блок с position: absolute, который его центрирует:
.content {
/* Размещаем .content относительно .aspect-box */
position: absolute;
/* Прижимаем к верхней границе */
top: 0;
/* Прижимаем к левой границе */
left: 0;
/* Растягиваем по всей ширине родителя */
width: 100%;
/* Растягиваем по всей высоте родителя */
height: 100%;
/* Включаем flexbox для центрирования */
display: flex;
/* Центрируем содержимое по вертикали */
align-items: center;
/* Центрируем содержимое по горизонтали */
justify-content: center;
}
В итоге такое решение работает без JavaScript и его можно использовать для видео, изображений, карточек и любых контейнеров.
Совместимость с браузерами
Padding поддерживается во всех браузерах, включая Chrome, Firefox, Safari, Edge и IE. Это одно из самых стабильных CSS-свойств, с которым практически нет кросс-браузерных проблем.
Спецификации
Padding — это часть CSS Box Model, определяющей, как рассчитываются размеры элементов на странице. Он подробно описан в официальной спецификации CSS Level 2 и CSS Box Model Level 3. Почитать можно здесь:
- MDN: padding — справка с примерами.
- CSS Box Model (W3C) — официальная спецификация W3C.
- CSS Logical Properties — современный подход, заменяющий padding-left/right/top/bottom на padding-inline и padding-block.
Вам слово
Приходите к нам в соцсети поделиться своим мнением об отступах и почитать, что пишут другие. А ещё там выходит дополнительный контент, которого нет на сайте: шпаргалки, опросы и разная дурка. В общем, вот тележка, вот ВК — велком!
