Разница между box-sizing: content-box и box-sizing: border-box заключается в том, как браузер рассчитывает размеры элемента при наличии рамок и полей. 14

box-sizing: content-box (значение по умолчанию) добавляет отступы и рамки снаружи блока, увеличивая его размеры. 12 Например, если задать ширину элемента 100 пикселей, то ширина контентной области будет 100 пикселей, а ширина любой границы или отступа будет добавлена к конечной ширине элемента, делая его шире 100 пикселей. 3

box-sizing: border-box позволяет браузеру учитывать любые границы и отступы при расчёте ширины и высоты элемента. 3 Например, если задать ширину элемента 100 пикселей, то эти 100 пикселей будут включать любую добавленную границу или отступ, а контентная область уменьшится, чтобы поглотить лишнюю ширину. 3