В чем разница между поведением блоков с box-sizing: content-box и с box-sizing: border-box?

Разница между box-sizing: content-box и border-box

box-sizing — это CSS свойство, которое определяет, как вычисляется итоговый размер элемента. Это одно из самых важных свойств для предсказуемого макета и часто вызывает путаницу у начинающих разработчиков.

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

В этом режиме ширина и высота элемента включают ТОЛЬКО содержимое, без padding, border и margin:

.box-content {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;  /* Значение по умолчанию */
}

Расчёт:

• width: 200px — только содержимое
• Итоговая ширина = 200px (содержимое) + 20px (слева) + 20px (справа) + 5px (бордер слева) + 5px (бордер справа) = 250px
• Итоговая высота = 100px + 20px + 20px + 5px + 5px = 150px

Визуально:

┌─────────────────────────────┐
│ border (5px)                │
│ ┌───────────────────────┐   │
│ │ padding (20px)        │   │
│ │ ┌─────────────────┐   │   │
│ │ │ 200px (содержимое)   │   │
│ │ └─────────────────┘   │   │
│ │                       │   │
│ └───────────────────────┘   │
└─────────────────────────────┘
Итого: 250px ширина, 150px высота

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

В этом режиме ширина и высота включают содержимое, padding И border, но НЕ margin:

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

Расчёт:

• width: 200px — ВСЁ, включая padding и border
• Содержимое = 200px - (20px * 2) - (5px * 2) = 200px - 40px - 10px = 150px
• Размер элемента на странице = 200px x 100px

Визуально:

┌─────────────────────────┐
│ border (5px)            │
│ ┌─────────────────────┐ │
│ │ padding (20px)      │ │
│ │ ┌───────────────┐   │ │
│ │ │ 150px (содержимое)  │ │
│ │ └───────────────┘   │ │
│ │                     │ │
│ └─────────────────────┘ │
└─────────────────────────┘
Итого: 200px ширина, 100px высота (как указано)

Таблица сравнения

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

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

div {
  width: 300px;
  padding: 15px;
  border: 2px solid blue;
}

.content-box {
  box-sizing: content-box;  /* По умолчанию */
  /* Итоговая ширина = 300 + 15 + 15 + 2 + 2 = 334px */
}

.border-box {
  box-sizing: border-box;   /* Рекомендуется */
  /* Итоговая ширина = 300px (как указано) */
}

Почему border-box лучше?

1. Предсказуемость макета:

.container {
  display: flex;
  width: 100%;
}

.item {
  width: 33.33%;   /* С border-box = ровно треть */
  padding: 10px;
  border: 1px solid;
}
/* С content-box размеры не совпадут и макет сломается */

2. Работа с сеткой:

.grid {
  display: grid;
  gap: 10px;
}

.item {
  width: calc(50% - 5px);
  box-sizing: border-box;  /* Упрощает расчёты */
}

3. Современный стандарт: Большинство CSS фреймворков (Tailwind, Bootstrap) по умолчанию используют box-sizing: border-box для всех элементов:

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

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

Когда важно помнить?

• При работе с flex или grid: Всегда используй border-box, иначе padding и border сломают макет
• При расчёте ширины: С border-box расчёты проще: width: 50% именно половина
• При работе с JavaScript: Если получаешь размеры через element.clientWidth или offsetWidth, помни, что они уже включают padding и border (как будто border-box)
• Старые браузеры: В IE8 и ниже border-box работал неправильно, но это уже не актуально

Резюме

content-box — размер включает только содержимое, что делает расчёты непредсказуемыми и сложными. border-box — размер включает padding и border, что делает макет более логичным и надёжным. Современный стандарт использовать border-box для всех элементов, и это обязательно при работе с flexbox, grid и отзывчивых макетов.