Изменение padding DIV без влияния на размеры в CSS

Быстрый ответ

Если вы не хотите, чтобы внутренние отступы влияли на общие размеры вашего DIV, воспользуйтесь свойством box-sizing: border-box;. Это свойство позволяет учитывать толщину рамки и внутренние отступы при расчете общих размеров элемента:

.my-special-div {
  box-sizing: border-box;  /* Избавляемся от проблем с внутренними отступами! */
  width: 300px;            /* Ширина остаётся неизменной */
  height: 200px;           /* Высота сохраняется */
  padding: 20px;           /* Внутренние отступы теперь включены в общий размер! */
}

Теперь div по-прежнему имеет размеры 300x200px снаружи, однако пространство внутри автоматически корректируется, учитывая внутренние отступы.

Разбор свойства box-sizing

Свойство box-sizing: border-box; указывает браузеру рассчитывать ширину и высоту элемента, включая рамку и внутренние отступы. Размеры div остаются стабильными, и внутренние отступы не вносят изменения в размер содержимого.

Поддержка в старых браузерах

Большинство современных браузеров прекрасно поддерживают box-sizing. Однако для некоторых устаревших версий браузеров могут потребоваться вендорные префиксы:

.my-special-div {
  -moz-box-sizing: border-box;     /* Для Firefox */
  -webkit-box-sizing: border-box;  /* Для Safari и Chrome */
  box-sizing: border-box;          /* Для всех остальных */
}

Подробнее об этом расскажет наш спикер на видео

Альтернативный подход: двойные div

В некоторых случаях можно обойтись без изменения box-sizing, создав пару вложенных div:

<div class="outer-div" style="width: 300px;">
  <div class="inner-div" style="padding: 20px;"> /* Внутренняя зона комфорта с отступами */
    Ваш контент здесь...
  </div>
</div>

Важно, чтобы у .inner-div не было указано фиксированной ширины, тогда отступы займут всё доступное пространство, дополнив функционал border-box.

Подробности и лучшие практики

Адаптивный дизайн

В адаптивном дизайне каждый пиксель имеет значение. С border-box размеры элемента становятся независимыми от изменений внутренних отступов, что упрощает процесс разработки.

Удобство для динамического контента

Если div предусматривает динамически меняющийся контент, использование border-box обеспечивает возможность менять внутренние отступы без непредвиденных последствий для размеров элемента.

Ситуации, в которых border-box не универсален

• Сетки: при работе с CSS-сетками имеет смысл применять другой подход к border-box, поскольку это свойство может привести к непредсказуемым результатам.
• Flexbox: border-box может влиять на ведение свойств flex-grow и flex-shrink в flex-контейнерах, поэтому тщательно тестируйте ваши макеты.

Визуализация

Можно визуализировать изменение внутренних отступов в DIV как процесс корректировки рамки картины.

До: 🖼️ [] 'Картина' идеально подходит к размерам 'рамы' (DIV).

🔧 При изменении внутренних отступов размер 'картины' (DIV) сохраняется, меняется лишь 'рама':

После: 🖼️ [ ] Теперь 'рамка' откорректирована, 'картина' осталась прежней.

Применение box-sizing: border-box схоже с указанием раме: «Вписывайся в первоначальные размеры».

div {
  box-sizing: border-box; /* 🖼️ Вот размеры моей картины, не превышай их! */
  padding: 20px;          /* [==    ==] Увеличиваем рамку, не затрагивая картину! */
}

Термин 'картина' обозначает контент DIV, который сохраняет свой исходный размер, в то время как вы можете свободно корректировать внутренние отступы, варьируя размер 'рамы', без воздействия на 'картину'.

Полезные материалы

1. Модель «коробки» CSS (CSS Box Model) — пособие для начинающих разработчиков по теме модели коробки в CSS.
2. box-sizing – Каскадные таблицы стилей (CSS) | MDN — детальная информация о свойстве box-sizing на сайте Mozilla.
3. Box Sizing | CSS-Tricks — статья о том, почему свойство box-sizing: border-box стоит включить в набор ваших инструментов CSS.
4. Чем отличаются margin и padding в CSS? – Stack Overflow — объяснение разницы между внутренними и внешними отступами в CSS.
5. GitHub – Schepp/box-sizing-polyfill: Полифилл для CSS box-sizing: border-box для IE 6/7 — полифилл для обеспечения совместимости box-sizing: border-box в IE 6 и IE 7.
6. Can I use... Support tables for HTML5, CSS3, etc — инструмент для проверки поддержки box-sizing в различных браузерах.