«Блочная модель (box model) – это то как браузер воспринимает и отображает элементы на веб-странице.
Это стандартная модель W3C. Что важно заметить здесь, так это то, что реальная ширина рамки – не та, которая обозначена в свойствах ширины.

Давайте, к примеру, возьмем блок шириной 200 пикселей, 25 пикселей внутренние отступы с каждой стороны и рамка в 5 пикселей. Реальная отображаемая ширина блока, в таком случае, будет 260 пикселей, а не 200, как мы этого хотели.
Если же нам нужен блок со строгой шириной в 200 пикселей, нам всего лишь надо указать основную ширину в 140 пикселей, и всё. Важно просто знать, как это работает. Это поможет вам избежать головных болей в будущем.
Это стандартная модель W3C. Что важно заметить здесь, так это то, что реальная ширина рамки – не та, которая обозначена в свойствах ширины.

Давайте, к примеру, возьмем блок шириной 200 пикселей, 25 пикселей внутренние отступы с каждой стороны и рамка в 5 пикселей. Реальная отображаемая ширина блока, в таком случае, будет 260 пикселей, а не 200, как мы этого хотели.
Если же нам нужен блок со строгой шириной в 200 пикселей, нам всего лишь надо указать основную ширину в 140 пикселей, и всё. Важно просто знать, как это работает. Это поможет вам избежать головных болей в будущем.