Padding в веб-дизайне и CSS¶

Padding (от англ. padding — набивка, прокладка) — в веб-дизайне и каскадных таблицах стилей (CSS) область внутреннего поля элемента, которая заполняет пространство между его содержимым (контентом) и границей (border). Наряду с margin (внешним отступом) и border (границей) padding входит в базовую блочную модель (box model) CSS, определяющую, как браузер рассчитывает размеры и расположение элементов на странице.

¶Блочная модель и место padding

В стандартной блочной модели CSS (W3C box model) каждый элемент веб-страницы состоит из четырёх концентрических областей: содержимое (content), внутренний отступ (padding), граница (border) и внешний отступ (margin). Padding располагается непосредственно вокруг контента и визуально «раздвигает» границу элемента от текста, изображения или другого содержимого. В отличие от margin, который создаёт пространство между соседними элементами, padding увеличивает внутреннюю область самого элемента и, если у элемента задан фон или цвет, окрашивается вместе с контентом.

Существует две модели расчёта размеров: стандартная (content-box) и альтернативная (border-box). В стандартной модели итоговая ширина элемента вычисляется как сумма ширины контента, padding и border. В модели border-box, которая часто используется в современных фреймворках (например, Bootstrap), заданная ширина включает в себя padding и border, что упрощает вёрстку адаптивных макетов.

¶Свойства CSS

В CSS для задания внутренних отступов используется группа свойств padding:

• padding-top — верхний отступ;
• padding-right — правый отступ;
• padding-bottom — нижний отступ;
• padding-left — левый отступ.

Сокращённое свойство padding позволяет задать все четыре значения одновременно. Количество значений определяет правило записи:

• одно значение (например, padding: 10px) — задаёт одинаковый отступ со всех сторон;
• два значения (padding: 10px 20px) — первое задаёт вертикальные отступы (верх и низ), второе — горизонтальные (право и лево);
• три значения (padding: 10px 20px 15px) — задают верхний, горизонтальные и нижний отступы;
• четыре значения (padding: 10px 20px 15px 5px) — перечисляются по часовой стрелке, начиная с верхнего: верх, право, низ, лево.

Значения могут задаваться в любых единицах измерения CSS: пикселях (px), процентах (%), em, rem, а также в единицах viewport (vh, vw). Процентное значение вычисляется от ширины родительского блока, а не от высоты, что важно учитывать при вёрстке.

¶Отличие от margin

Ключевое различие между padding и margin заключается в их влиянии на геометрию элемента и взаимодействие с фоном. Padding увеличивает кликабельную область и область фона элемента, тогда как margin создаёт прозрачное пространство снаружи. Соседние вертикальные margin могут «схлопываться» (collapsing margins) — большее из двух значений поглощает меньшее, тогда как padding никогда не схлопывается. Padding не может принимать отрицательные значения, в то время как margin — может, что используется для сдвига элементов относительно их нормального положения.

¶Применение

Основные сценарии использования padding в вёрстке:

• создание «воздуха» внутри кнопок, карточек, заголовков и других интерактивных элементов для улучшения читаемости и визуального восприятия;
• увеличение области клика для ссылок и элементов управления, что особенно важно для мобильных интерфейсов и требований доступности (WCAG рекомендует минимальный размер цели касания 44×44 пикселя);
• формирование внутренних отступов в ячейках таблиц (свойство cellpadding в HTML, которое в современной вёрстке заменяется CSS-свойством padding);
• центрирование содержимого внутри блока с фиксированной высотой при использовании техники «padding-обманки»;
• создание пропорциональных блоков с сохранением соотношения сторон (например, для встраивания видео), когда высота задаётся через padding-top в процентах.

¶Padding в других контекстах

Термин padding используется не только в CSS. В HTML-таблицах атрибут cellpadding задаёт расстояние между содержимым ячейки и её границей. В графических редакторах (Adobe Photoshop, Figma) padding обозначает внутренние отступы фреймов и компонентов. В программировании и криптографии термин используется для обозначения добавления избыточных данных: например, в блочных шифрах применяется паддинг для дополнения сообщения до длины, кратной размеру блока (схемы PKCS#7, ANSI X.923). В компьютерных сетях padding — это биты заполнения, добавляемые для выравнивания кадров до минимальной длины (например, в Ethernet).

¶Инструменты разработчика

Современные браузеры предоставляют инструменты для визуальной отладки блочной модели. В панели разработчика (DevTools) при выделении элемента отображается схема box model, где области padding, border и margin подсвечиваются разными цветами. Это позволяет быстро диагностировать проблемы с размерами и отступами. Для сброса стандартных стилей браузеров (например, отступы у списков ul, ol и тега body) применяются CSS-сбросы (reset) или нормализация стилей (normalize.css), которые обнуляют padding и margin у всех элементов по умолчанию.

¶Типичные ошибки

Частой ошибкой начинающих верстальщиков является путаница между padding и margin, что приводит к непредсказуемым зазорам между элементами или, наоборот, к слипанию контента с границей. Другая распространённая проблема — использование фиксированной высоты элемента вместе с padding: при добавлении отступов контент может выходить за пределы блока, если не задано свойство box-sizing: border-box. Также следует учитывать, что процентные значения padding рассчитываются от ширины родительского контейнера, что иногда приводит к неожиданным результатам при адаптивной вёрстке.