пятница, 28 сентября 2012 г.

CSS border, margin, padding


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

Это стандартная модель W3C. Что важно заметить здесь, так это то, что реальная ширина рамки – не та, которая обозначена в свойствах ширины.






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

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

Комментариев нет:

Отправить комментарий