Ширина блока с учетом отступов

Недавно на сайте web-standards.ru был опубликован перевод статьи «Sizing Boxes (Back to the Future)» под заглавием «Размеры блоков, или Назад в будущее». В статье речь идет о вариантах реализации блочной модели, о том, как это было сделано в IE и как реализовано в остальных браузерах. Автор рассуждает о том, какую из моделей все-таки удобнее использовать, проводит опрос. Стоит ознакомиться.

Процитирую автора перевода:

Те из вас, кто помнит тяжелые старые времена, помнит и неправильную блочную модель, которую IE использовал вместо стандартной модели W3C. В этой модели рамка border и отступ padding считались частью ширины width и высоты height блока, в то время как в модели W3C отступ и рамка прибавлялись к ширине и высоте при расчёте конечных размеров блока. В модели IE свойство width отражало конечную ширину блока, в то время как в модели W3C оно отражало ширину контентной части блока (то есть части блока, в которой находится непосредственно его содержимое).

Для себя я решил сделать небольшую шпаргалку по свойствам и значениям для использования нестандартной блочной модели, возможно, пригодится и вам.

-webkit-box-sizing: border-box; /* Safari, Chrome, другие браузеры на WebKit */
-moz-box-sizing: border-box; /* Firefox, другие браузеры на Gecko */
box-sizing: border-box; /* Opera и IE8+ */
Опубликовано

Обратите внимание на предыдущие записи: