Padding: внутренние отступы и их роль в блочной модели (CSS)

Когда верстаешь страницу, легко столкнуться с ситуацией: задаёшь элементу ширину 300 px, а в браузере он занимает 340 px. Часто причина — в padding. Это свойство добавляет пространство внутри элемента, и оно напрямую влияет на то, сколько места блок реально занимает на странице.

Что такое padding и как он ложится в box model

Блочная модель (box model) — это способ, которым браузер «собирает» итоговый размер элемента. Представь её как набор вложенных коробок:

• Content — внутренняя коробка, где лежит текст или картинка. Её размер ты задаёшь через width и height.
• Padding — прослойка сразу вокруг контента. Это и есть внутренние отступы.
• Border — рамка поверх padding.
• Margin — внешняя прослойка, которая отделяет этот элемент от соседей.

Важно: фон элемента распространяется на padding, но не на margin. То есть если у блока серый фон и большой padding — серое поле будет видно и вокруг контента.

Как работает расчёт ширины по умолчанию

По умолчанию браузер использует модель box-sizing: content-box. В ней width — это строго размер контента, а всё остальное прибавляется снаружи.

Итоговая ширина = width + левый padding + правый padding + левая border + правая border.
Итоговая высота = height + верхний padding + нижний padding + верхняя border + нижняя border.

Это частый источник ошибок: ты думаешь, что блок 300 px, а он реально шире.

Пример: как padding меняет итоговые размеры

Допустим, есть блок:

<div class="box">Текст</div>
 
<style>
  .box {
    width: 300px;
    height: 100px;
    background: #3498db;
    color: white;
    padding: 25px;
    border: 5px solid #2c3e50;
  }
</style>

Считаем ширину:

• width: 300 px
• Горизонтальный padding: 25 + 25 = 50 px
• Горизонтальная border: 5 + 5 = 10 px
• Итого: 300 + 50 + 10 = 360 px

Высота:

• height: 100 px
• Вертикальный padding: 25 + 25 = 50 px
• Вертикальная border: 5 + 5 = 10 px
• Итого: 100 + 50 + 10 = 160 px

То есть визуально блок занимает 360×160 px, хотя явно ты задал 300×100 px.

Box-sizing: border-box — чтобы размеры были предсказуемыми

Чтобы width включал в себя padding и border, используют box-sizing: border-box:

* {
  box-sizing: border-box;
}

Теперь width: 300px — это итоговая ширина блока. Браузер сам «подрежет» контент, чтобы уместились padding и border.

Для того же примера с .box:

• Итоговая ширина остаётся 300 px.
• Ширина контента: 300 − 50 (padding) − 10 (border) = 240 px.

Это стандарт современной вёрстки: так проще планировать сетки и адаптивность, потому что размеры блоков не «разъезжаются» из‑за отступов.

Практические сценарии: зачем нужен padding

Кнопки. У кнопки нет жёсткой ширины, но ей нужны отступы, чтобы текст не прилипал к краям и было удобно нажимать:

<button class="btn">Отправить</button>
 
<style>
  .btn {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
  }
</style>

Здесь padding делает кнопку удобной: увеличивает область клика и выравнивает текст по вертикали и горизонтали.

Карточки. В карточке padding отделяет контент от рамки и фона, делает её аккуратной:

<article class="card">
  <h3>Заголовок</h3>
  <p>Описание карточки с деталями.</p>
</article>
 
<style>
  .card {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 24px;
  }
</style>

Без padding текст бы «прилип» к рамке, и карточка выглядела бы тесной.

Формы. В полях ввода padding делает строку текста визуально центрированной и удобнее для чтения:

<input class="input" type="text" placeholder="Введите текст">
 
<style>
  .input {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

Нюансы, которые стоит помнить

• Отрицательные значения не работают. Если написать padding: -5px, браузер проигнорирует это значение. Для «сжатия» используют другие приёмы.
• Проценты считаются от родителя. padding: 5% будет равен 5 % от ширины родительского блока, а не самого элемента. Это удобно для адаптивности, но требует внимания при вложенных контейнерах.
• Нет наследования. Дочерние элементы не получают padding родителя автоматически. Если нужно, задавай явно.
• Фон покрывает padding. Это полезно: можно сделать цветной блок и добавить отступ, чтобы контент не касался краёв.

Частые ошибки и как их избежать

• Не учли padding при фиксированной ширине. Например, в сетке из трёх колонок по 33.3% каждая, плюс padding — колонки не влезают. Решение: использовать box-sizing: border-box и/или calc().
• Смешивают content-box и border-box в одном проекте. Лучше сразу задать * { box-sizing: border-box; } в начале CSS и придерживаться этого.
• Слишком маленький padding на мобильных. На сенсорных экранах маленький отступ у кнопок и ссылок делает их неудобными. Минимум 12–16 px по вертикали — хорошая практика.