Вкладывает ли ширину и высоту блок с box-sizing: content-box

box-sizing: content-box и включение padding/border в размеры

box-sizing: content-box — это значение по умолчанию в CSS. При нем ширина и высота НЕ включают padding и border элемента. Они рассчитываются отдельно.

Это означает, что padding и border добавляются к общему размеру элемента, увеличивая его итоговую ширину и высоту на экране.

Как работает content-box

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

Расчет размеров:

Ширина content: 200px Padding: 20px + 20px = 40px Border: 5px + 5px = 10px Итоговая ширина = 200 + 40 + 10 = 250px

Сравнение с border-box

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

Пример 1: content-box (по умолчанию)

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

Визуально на экране: элемент займет 250px (200px контент + 20px padding слева/справа + 5px border слева/справа).

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

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid navy;
  box-sizing: border-box;
}

Визуально на экране: элемент будет ровно 200px, padding и border входят в эту ширину.

Проблемы с content-box

Проблема 1: Предсказуемость размеров

.card {
  width: 300px;
  padding: 15px;
  border: 2px solid #ddd;
  box-sizing: content-box;
}

Реальная ширина = 300 + 15 + 15 + 2 + 2 = 334px. Сложно делать адаптивные макеты.

Проблема 2: Вложенные элементы с padding

При width: 100% для вложенного элемента он переполнит контейнер из-за padding родителя.

Решение: Используй border-box

Современный подход — установить box-sizing: border-box для всех элементов:

* {
  box-sizing: border-box;
}

Теперь ширина и высота включают padding и border:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid navy;
  box-sizing: border-box;
}

Реальный пример: Разница при создании сетки

Плохо: с content-box

.grid {
  display: flex;
}

.item {
  width: 50%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: content-box;
}

Два item'а с width: 50% + padding/border не поместятся в строку!

Хорошо: с border-box

.grid {
  display: flex;
}

.item {
  width: 50%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

Два item'а идеально встанут в строку.

Ключевые моменты

• content-box — padding и border НЕ входят в width/height
• Итоговый размер = width + 2*(padding) + 2*(border)
• Сложность — нужно вручную считать реальный размер
• border-box — рекомендуемый подход (padding и border входят)
• Best practice — установи box-sizing: border-box для всех элементов
• В большинстве современных фреймворков (Bootstrap, Tailwind) используется border-box