Box-sizing: управление размерами элемента (content-box vs border-box)

Почему box-sizing — это магия CSS? ✨

Представь: ты проектируешь блок шириной 300px, добавляешь padding: 20px и… внезапно его реальная ширина становится 340px! Вот тут и врывается box-sizing — твой личный помощник в управлении размерами элементов. Давай разберёмся, как это работает.

Как браузер считает ширину элемента? 📏

По умолчанию CSS использует модель content-box. Это значит:

.element {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* Фактическая ширина = 300px (content) + 40px (padding) + 10px (border) = 350px! */
}

💡 Фишка: Если не задать box-sizing, все padding и border будут добавляться к указанной ширине/высоте. Это историческое поведение CSS.

border-box: Спаситель верстальщиков 🦸‍♂️

Переключаемся на border-box — теперь ширина включает padding и border:

.element {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* Ширина остаётся 300px! Проблемы с макетом исчезают. */
}

Ключевые отличия:

Глобальный сброс: почему * { box-sizing: border-box } — must-have? 🌍

Большинство современных сайтов используют этот приём:

*, *::before, *::after {
  box-sizing: border-box; /* Единообразие для всех элементов */
}

🚨 Осторожно: Псевдоэлементы (::before, ::after) тоже нужно учитывать! Именно поэтому мы добавляем их в селектор.

Практика: два мира в одном макете 🌎

Сравни поведение на практике:

<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>

.content-box {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  /* Реальная ширина: 250px */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  /* Ширина остаётся 200px */
}

✨ Протестируй: Открой DevTools (F12) и убедись, как меняется вычисленная ширина!

Когда использовать content-box? 🧐

Редкие, но важные кейсы:

• Точный контроль размера только контента (например, SVG или canvas)
• Наследование старого кода без рефакторинга
• Специфичные расчёты в JavaScript

FAQ: Ответы на горячие вопросы 🔥

❓ Почему border-box не значение по умолчанию?

Исторические причины — ранние версии CSS фокусировались на содержимом, а не на дизайне макетов.

❓ Как box-sizing влияет на margin?

Никак! margin всегда добавляется внешне к блоку, независимо от модели.

❓ Работает ли это с height: 100%?

Да! Особенно полезно для точного контроля высоты с учётом padding.

Вывод: какой путь выбрать? 🛠️

• Для современных проектов: border-box везде (через глобальный сброс)
• Для легаси-кода: аккуратно внедряй изменения
• Для специфичных задач: content-box по необходимости

Попробуй прямо сейчас добавить box-sizing: border-box в свой проект — и почувствуй, как жизнь становится проще! 🎉