Что такое box-sizing border-box на CSS
Чем отличается box-sizing: border-box от content-box?
В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области.
Пограничные случаи этой модели начали сыпаться уже к 2002-му:
— дизайнер просит блок шириной 300px с 10px padding и 1px border;
— вы пишете width: 300px; padding: 10px; border: 1px solid;
— браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии.
А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри?
—...