Преимущества использования border-box для расчёта размеров элементов:

• Предсказуемость размеров. 1 Ширина и высота элемента включают содержимое, отступы и границы, что делает размеры элементов более предсказуемыми. 1
• Упрощение расчётов. 1 Не нужно постоянно пересчитывать размеры элементов, когда добавляются отступы или границы. 1 Это упрощает процесс вёрстки и уменьшает вероятность ошибок. 1
• Согласованность макета. 2 Модель элемента и, следовательно, макет становятся более согласованными в плане взаимодействия с другими элементами. 4
• Адаптивный дизайн. 2 Это упрощает согласованность макета на экранах разных размеров, включая отступы и границы в пределах заданных размеров. 2
• Совместимость с фреймворками. 1 Многие CSS-фреймворки, такие как Bootstrap, уже используют box-sizing: border-box для своих элементов, что делает его использование в проекте более согласованным. 1
• Поддержка браузерами. 1 Все современные браузеры поддерживают box-sizing: border-box, так что это не должно вызвать проблем с совместимостью. 1