Подробный разбор одного из самых важных свойств в CSS, которое экономит нервы и время.

По стандарту CSS, когда вы задаете элементу ширину (width: 300px), эта ширина применяется только к контенту. Padding и Border добавляются сверху к этой ширине.

Это называется content-box (значение по умолчанию). Из-за этого верстальщики постоянно сталкивались с тем, что блоки «расползались» и выпадали из сетки.

1. box-sizing: content-box

content-box — это стандартное поведение браузера.

Формула расчета финальной ширины:

Финальная ширина = width + padding-left + padding-right + border-left + border-right

Наглядный пример:

Мы хотим блок шириной в 300px.

.content-box-demo {
  box-sizing: content-box; /* Можно не писать, это по умолчанию */
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

• Ширина контента: 300px.
• Padding: 20px слева + 20px справа = 40px.
• Border: 5px слева + 5px справа = 10px.
• Итоговая ширина элемента на странице: 350px.

2. box-sizing: border-box

Это значение меняет алгоритм расчета — теперь width и height включают в себя и контент, и padding, и border.

Формула расчета:

Ширина контента = width - padding-left - padding-right - border-left - border-right

Контент сожмется, чтобы освободить место для padding и border.

Тот же пример, но с border-box:

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

• Итоговая ширина элемента на странице: ровно 300px (как и задано).
• Ширина контента (пространство под текст): 300px - 40px - 10px = 250px.

3. Глобальный сброс (Золотой стандарт верстки)

Почти никто не использует content-box для всей страницы. Это пережиток прошлого. 99% современных проектов начинаются с этого правила, которое переопределяет поведение для всех элементов:

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

Теперь div с width: 33.333%, у которого есть padding: 15px, не упадет на новую строку в сетке из трех колонок.

Важный нюанс

box-sizing не влияет на margin, т.к. всегда находится снаружи элемента и не учитывается в width.