box-sizing: content-box vs border-box

box-sizing определяет, что включается в width и height элемента: только контент (content-box) или контент плюс padding и border (border-box).

Зачем нужно

По умолчанию (content-box) width: 200px означает 200px контента, а итоговая ширина будет 200 + padding + border. Это ломает расчёты при вёрстке сеток. border-box делает поведение интуитивным: width: 200px — это именно 200px на экране, включая padding и border. Именно поэтому первое правило большинства CSS-сбросов — *, *::before, *::after { box-sizing: border-box; }.

Где используется

  • Глобальный CSS-сброс (все элементы)
  • Сетки и flex/grid-раскладки с точными размерами
  • Форм-элементы с padding, не ломающие ширину

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

.box {
  box-sizing: content-box; /* по умолчанию */
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}
/* Итоговая ширина: 200 + 20 + 20 + 2 + 2 = 244px */

┌─ border (2px) ─────────────────────┐
│  ┌─ padding (20px) ──────────────┐ │
│  │  content: 200px               │ │
│  └───────────────────────────────┘ │
└────────────────────────────────────┘
  total = 244px

border-box

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}
/* Итоговая ширина: 200px (padding и border внутри) */
/* Контент: 200 - 20 - 20 - 2 - 2 = 156px */

┌─────────── 200px ────────────────┐
│  padding(20) │content│ padding(20)│
└──────────────────────────────────┘

Глобальный сброс

/* Стандартный сброс — добавляется в начало любого проекта */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Практический пример: колонки

/* content-box: каждая колонка 50% + padding = выходит за 100% */
.col {
  width: 50%;
  padding: 16px;
  /* итого > 100%, вторая колонка переносится */
}

/* border-box: 50% включает padding, всё помещается */
.col {
  box-sizing: border-box;
  width: 50%;
  padding: 16px;
  /* итого = 100%, обе колонки в одной строке */
}

<div style="display: flex">
  <div class="col">Колонка 1</div>
  <div class="col">Колонка 2</div>
</div>

Частые ошибки

  1. Забытый глобальный border-box — если сброс не добавлен, каждый элемент с padding выходит за рассчитанный размер
  2. margin в border-box не включён — border-box не учитывает margin; общее место на странице = width + margin
  3. Переопределение компонентов библиотек — если глобальный сброс применяется, а библиотека ожидает content-box, могут быть конфликты; проверяйте документацию

Связанные темы

Ресурсы