Box Sizing Border Box - что это и как использовать

Box-sizing:border-box - это CSS свойство, которое позволяет управлять тем, как расчитывается размер элемента и как он взаимодействует со своими внутренними компонентами, такими как границы и заполнение. По умолчанию, размер элемента включает его заполнение и границы, что может привести к неожиданным результатам при установке ширины и высоты.

Когда свойство box-sizing задано значением border-box, размер содержимого элемента учитывает границы и заполнение. Это означает, что если элемент имеет ширину 200px и границы толщиной 10px, то его общая ширина всего лишь 200px, включая границы и заполнение. Это очень полезно при создании гибких макетов.

Пример:

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

Здесь, box-sizing установлен на значение border-box. Задан размер ширины в 200 пикселей, и добавлены границы толщиной 10 пикселей и заполнение в 20 пикселей. Если бы не было установлено свойство box-sizing, размер элемента был бы 260 пикселей (220 пикселей для элемента и 20 пикселей для заполнения и границ). Но благодаря свойству border-box, размер элемента равен 200 пикселей (200 пикселей + 0 пикселей для заполнения и границ).