Отмена изменения размеров div с помощью padding в CSS

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

Для предотвращения изменений ширины и высоты элемента при добавлении внутренних отступов или padding, следует использовать box-sizing: border-box;:

.element {
  box-sizing: border-box; 
  width: 100px;
  height: 100px;
  padding: 20px; 
}

С применением свойства box-sizing: border-box; параметры ширины и высоты останутся неизменными и составят 100px, независимо от размера внутренних отступов.

Разбираемся со свойством box-sizing

Свойство box-sizing определяет, каким образом рассчитываются размеры элементов в CSS. По умолчанию оно установлено как content-box и точно игнорирует padding и рамку при определении размера элемента. Применение border-box заставляет браузер учитывать padding и рамку при расчете общей ширины и высоты.

Существуют ли альтернативы? Конечно!

Встречайте отступы

Хотите добавить пространство вокруг элемента? Воспользуйтесь margin. Это свойство создаст отступы, не затрагивая внутренние размеры элемента.

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

Сдвиг текста для оформления содержимого

Нужен сдвиг текста внутри div, но не хотите менять ширину? Рассмотрите свойство text-indent, которое позволяет сдвинуть текст, сохранив при этом размеры div.

Гибкое оформление с помощью вложенных div

Для создания умных макетов можно использовать вложенные divs: задайте width: auto; и margin-left или margin-right. Таким образом, вы сможете эмулировать padding без воздействия на ширину элемента.

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

Продемонстрируем CSS Box Model с применением и без использования box-sizing: border-box;:

Вот ваш "бокс" в CSS — мы символически прозвали его картинной рамой:

Без `border-box`:
[🖼️] = 🎨 + Рамка (Padding + Border, которые увеличивают размер)

Декорируя раму (padding/рамка), картина (содержимое) изменяет свои размеры.

С `border-box`:
[🖼️] = 🎨 (Padding + Border включены в размер, нет лишних потерь😉)

Так картина (содержимое) сохраняет изначальные размеры, независимо от объёма рамы.

.frame {
  width: 300px;       
  height: 200px;      
  padding: 40px;      
  box-sizing: border-box; 
}

Мало того, что рама интенсивно "ест", box-sizing: border-box; гарантирует сохранение размера вашего произведения искусства (содержимого).

Глобальное использование box-sizing

Универсальный подход

Хотите однородности? Примените box-sizing: border-box; ко всем элементам через универсальный селектор *. Это обеспечит консистентность размеров в вашем дизайне.

* {
  box-sizing: border-box; 
}

Подробное понимание box model

Овладение CSS box model и свойством box-sizing поможет избегать проблем с версткой и обеспечит предсказуемость дизайна.

Ключевые моменты в верстке и дизайне

Постоянство размеров элементов

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

Интегральность дизайна

Применяйте border-box, чтобы добавление padding и рамок не портило ваши дизайнерские замыслы. Макет должен быть стабильным и производить впечатление тщательно продуманной конструкции.

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

1. Введение в базовую модель CSS Box Model – CSS: Cascading Style Sheets | MDN — детальное руководство по CSS Box Model.
2. Box Sizing | CSS-Tricks — подробные общения и практические примеры использования box-sizing.
3. CSS Box Sizing — ясные объяснения и примеры применения box-sizing.
4. Полное руководство по calc() в CSS | CSS-Tricks — настройка индивидуальных размеров с помощью CSS calc().
5. Just a moment... — дополнительные решения от сообщества по предотвращению изменения размеров элементов при добавлении рамок.