Для чего используется свойство box-sizing?

Для чего используется свойство box-sizing?

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

Две модели расчёта размеров

1. content-box (по умолчанию)

.box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Реальная ширина на странице: content(300px) + padding(202) + border(52) = 350px

Формула: Реальный размер = width + padding2 + border2

Это создаёт проблемы, потому что элемент становится шире, чем вы ожидаете!

2. border-box (рекомендуется)

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Реальная ширина на странице: 300px ровно

Формула: width = контент + padding + border

Это гораздо предсказуемее!

Практический пример

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<style>
  .container {
    width: 600px;
  }

  .item {
    box-sizing: border-box;
    width: 50%;
    padding: 20px;
    border: 5px solid;
  }
</style>

Лучшая практика: глобальное применение

Почти во всех проектах применяют border-box ко всем элементам:

*, *::before, *::after {
  box-sizing: border-box;
}

Tailwind CSS по умолчанию использует border-box везде.

Резюме

• content-box — размер элемента НЕ включает padding/border (устарелая модель)
• border-box — размер элемента включает padding/border (современный стандарт)
• Всегда используй border-box на всём проекте
• Это делает вёрстку предсказуемой и удобной
• Почти все CSS фреймворки (Bootstrap, Tailwind) используют border-box по умолчанию