Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь.
Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг:
https://codepen.io/artik-man/pen/KKPMpdm
На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing. Добавим в наши блоки всего по одной строчке кода:
https://codepen.io/artik-man/pen/WNexvro
Так стало гораздо проще работать с CSS, поэтому многие добавляют box-sizing: border-box всем элементам на сайте при помощи этого кода:
* {
box-sizing: border-box;
}
Это стало хорошей и распространённой практикой, однако по умолчанию значением свойства box-sizing является стандартная модель content-box, возвращающий нас в те времена, когда приходилось вычислять ширину элемента по его полям.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues