Всеобщий box-sizing

Поскольку результат использования "box-sizing: border-box" намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом. Первый стиль в разделе head выше гарантирует, что размер всех элементов будет более интуитивно понятным. Заданная вами ширина - это ширина, которую вы получаете, без необходимости выполнять мысленные вычисления и управлять сложностью, связанной с шириной, которая зависит от нескольких свойств. Применять это ко всем элементам безопасно и разумно:

Этот div имеет полную ширину 300 пикселей, независимо от заполнения или границы!

Этот div также имеет полную ширину 300 пикселей, независимо от заполнения или границы!