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

Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь. Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг: https://codepen.io/artik-man/pen/KKPMpdm На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing...