Каков размер блока? Этот вопрос, вероятно, будоражил умы и производителей браузеров, и даже участников World Wide Web Consortium (W3C). Он очень сложен для начинающих, да и для экспертов тоже. Давайте шаг за шагом разберем блочную модель и обсудим ее ширину и высот.
Ширину блока можно задать с помощью свойства width:
a {width:400px}
Затем можно включить фоновый цвет, чтобы размеры блока были видны:
p {width:400px; background-color:#CCC}
Без добавления отступов содержимое блока занимает его целиком. Пока что все логично, но ситуация разительно изменится, как только мы захотим добавить границы и отступы. Итак давайте зададим отступ в 20 пикселов со всех сторон блока:
р {width:400px; background-color:#CCC; padding:0 20px}
По логике, если мы добавили отступы по 20 пикселов с двух сторон, блок шириной 400 пикселов должен сократиться до 360 пикселов, но это не так. В странном и чудесном мире CSS наш блок в результате таких действий увеличивается по ширине на 40 пикселов.
Если теперь мы добавим границы толщиной 6 пикселов справа и слева:
р {width:400px; margin; 0; padding:0 20px; border:#000 solid; border-width: 0 6рх 0 6px; #background-color:#CCC; padding:0 20px}
размер блока по ширине увеличится еще на 12 пикселов. Теперь исходный блок шириной 400 пикселов имеет ширину 452 пиксела: 6 + 20 + 400 + 20 + 6 = 452.
Давайте теперь добавим правое и левое поле для создания свободного пространства вокруг блока:
p {width:400px, margin: 0 30рх; padding:0 20px; border:#000 solid; border-Lath: 0 брх 0 6рх; background-color:#CCC;}
Добавив поля по 30 пикселов по бокам блока, мы еще более увеличили его ширину, что естественно, так как поля находятся снаружи элемента. При этом, несмотря на то, что по логике внутренние отступы и граница блока не должны влиять на его ширину, именно это и происходит.
Данный момент может оказаться весьма существенным в процессе отладки тонкой настройки сайта. Вы создали разметку с массой элементов, учтя каждый пиксел, и если вам понадобилось добавить отступы или границу, то придется вычесть соответствующее значение из общей ширины рамки.
Кроме того, Internet Explorer Версии 5 и 5.5 для Windows обрабатывает блочную модель совершенно по-другому. Он вычитает размер отступов от общего размера блока, сжимая содержимое. Internet Explorer 6 ведет себя так же, как IE5 в режиме Quirks (или без указания DOCTYPE). Однако Internet Explorer 6 поступает «корректно», как описано выше, если DOCTYPE указан как Transitional или Strict.
Итогом этого обсуждения блочной модели является то, что при указании ширины блока во всех совместимых со стандартами современных браузеров вы задаете ширину содержимого, а затем значения полей, отступов, границ просто прибавляются к ней.