Как влияе свойството box-sizing върху размера на елемента?

Свойството CSS box-sizing определя как се изчисляват размерите на елемента — дали включват или не вътрешните отстояния (padding) и рамките (border).

• Стойност content-box (по подразбиране): ширината и височината на елемента определят само съдържанието. Вътрешните отстояния и рамките се добавят към тези размери, увеличавайки общия размер на елемента.

• Стойност border-box: ширината и височината включват съдържанието, вътрешните отстояния и рамките. Това означава, че ако зададете ширина 100px, съдържанието ще бъде намалено с оглед на padding и border, за да остане общият размер 100px.

Пример:

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

В този случай, елементът .box ще има обща ширина 200px, включително padding и border. Ако беше content-box, общата ширина щеше да бъде 200 + 210 + 25 = 230px.

Използването на border-box често улеснява оформлението, тъй като размерите на елементите не "се разпиляват" заради padding и border.