В данной статье рассмотрен очень важный момент верстки веб-страниц - box model, или другими словами блочная система верстки сайтов.

Для раскрытия сущности данного понятия обратимся к спецификациям W3C. Данный документ гласит, что блочный элемент представляет собой прямоугольник, создающийся для тегов дерева документа.

Проще говоря, теги внутри страницы при выводе их на экран преобразовываются в прямоугольники.

Строение блочного элемента

Структура box model не отличается особой сложностью.

Грубо говоря, напоминает матрешки из прямоугольников: самый больший прямоугольник — внешние поля или отступ, после него следует граница самого блочного элемента, затем внутренние отступы и непосредственно сам контент.

Для более наглядного представления данного вопроса представлен рисунок ниже:

Величина каждой составляющей регулируется с помощью соответствующего стиля CSS: margin — внешние поля, border — границы непосредственно самого элемента, и padding — величина внутренних полей.

Также стоит отметить, что величина полей и границ может управляться независимо для каждой стороны, что наглядно проиллюстрировано на рисунке снизу:

Принципиальные различия между margin и padding

В первую очередь следует провести четкую черту между понятиями внутреннего и внешнего отступа. Внешний отступ в данном понимании означает расстояние между внешними окружающими элементами и непосредственно границей блочного элемента, а внутренний — расстояние от контента до границы.

Следующее принципиальное отличие этих элементов заключается в том, что при присвоении фону некой цветовой гаммы цвет распространиться только на пространство, относящееся к элементу padding.

Еще одна отличительная черта этих элементов основывается на подсчете общей ширины блочного компонента. Стандартно padding входит в эту ширину, а margin — нет. Это обстоятельство зависит от используемой блочной модели документа.

Разновидности блочных моделей

На сегодняшний день существует всего 2 разные модели блочных систем: традиционная, основывающаяся на особенностях работы Internet Explorer 6 и общераспространённая, основанная на основных принципах постулатов W3C. Последняя используется всеми современными браузерами.

Отличительная черта блочных элементов из разных систем

Существует одно единственное отличие между блоками в традиционной и общераспространённой системах. Оно основывается на отличии в правилах подсчета высоты и ширины блока.

Согласно традиционному строению системы блочных элементов, по правилам Internet Explorer, свойства высоты и ширины включают в себя размеры не только контента, но и его границы и внутренний отступ.

Однако же более современная блочная система, которая регламентируется постулатами W3C, при присвоении свойств ширины и высоты учитывает только контент. Наглядное отличие продемонстрировано на рисунке ниже:

Очень важно помнить об этих отличиях при создании нового веб-ресурса.

Определение реальных размеров элементов

Надеюсь, с традиционным подходом присвоения высоты и ширины блоку все предельно ясно. К примеру, если веб-мастер в файле CSS пишет следующий код:

block {
   width:200px;
   padding:20px;
}

То это значит, что элемент с классом block будет шириной 200px, с учетом того, что сам контент будет занимать 180 px, а оставшиеся 20px пойдут на внутренний отступ.

Второй случай, который не относиться к традиционному, связан с определенными трудностями. Они возникают из-за того, что свойства ширины и высоты относятся только к контенту, вследствие чего размеры блока не будут совпадать с данными параметрами.

Именно поэтому уважающему себя верстальщику необходимо знать, как определяются реальные размеры блочного элемента. В проработке этого момента нам поможет рисунок, который иллюстрирует компоненты, которые входят состав блока:

Из этого следует, что для определения, к примеру, высоты элемента блока нужно сложить верхний и нижний внутренние отступы, границы и высоту контента. Аналогичные расчеты проводятся при определения широты элемента, что представлено на рисунке ниже:

Однако интересная ситуация возникнет в том случае, если ширину задавать в процентах при не нулевой границе и отступе. Тогда, естественно, будет иметь место погрешность в размерах элемента.

Именно поэтому опытные веб-мастера стараются как можно реже использовать процентное обозначение ширины для блочной верстки по правилам W3C.

Подводя итоги

Разобравшись с данным вопросом Вы можете избежать многих проблем при верстке сайтов, особенно на начальных этапах.

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