box-sizing

визначає тип блокової моделі елемента – формулу (алгоритм) розрахунку його розмірів. content-box | border-box | inherit

content-box — властивості width іheight задають ширину і висоту області вмісту і не включають розміри полів (padding), рамок (border) і відступів (margin). Це значення за замовчуванням.

border-box — властивості width іheight задають кінцевий розмір елемента і включають значення полів (padding), рамок (border), але не зовнішніх відступів (margin).

inherit — успадковує значення блокової моделі батьківського елемента.

Зовнішні відступи (margin) у розрахунку ширини чи висоти елемента не враховуються

Стандартом блокової моделі в сучасних проєктах вважається значення border-box. Для того, щоб не задавати властивість box-sizing кожному елементу окремо, на початку файлу стилів використовується наступний CSS-код.

*,
*::before,
*::after {
box-sizing: border-box;
}
/* Решта коду */