Box model — блочная модель

Автор: Александр Головко и Татьяна Шкабко Дата публикации: 12.11.2010

Блочная модель (box model) — одно из фундаментальных понятий верстки.

В спецификации W3C это понятие определяется так:

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

Если по-русски, то это означает, что элемент в HTML документе выводится внутри своего отдельного прямоугольного блока.

Структура элемента в блочной модели

Вообще говоря, блок состоит из непосредственно контента (внутреннего содержимого), внутренних отступов, границ и, наконец, внешних отступов.

структура блока в блочной модели

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

структура блока в блочной модели

В чем различие между внутренним и внешним отступом

Итак, для элемента можно задать границы (рамку) и два вида отступов. Чем же они отличаются?

Основное различие сразу бросается в глаза: padding — это отступ между контентом и границей, а margin — это отступ между границей и «внешним миром».

Отсюда вытекает второе отличие — если для элемента задать фон (background), то этим фоном зальется и контент и внутренний отступ (padding). Margin же, находясь снаружи, всегда остается прозрачным.

Padding, если провести аналогию, это поля на листе бумаги. Они имеют тот же цвет, что и сам лист, но текст на них не заходит. Margin — это расстояние от края листа до другого, лежащего рядом листа или, скажем, до края стола.

Третье отличие заключается в том, что padding и margin по разному участвуют в подсчете общей ширины блока. Это зависит от принятой блочной модели.

Какие бывают блочные модели

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

В чем отличие различных блочных моделей

Структура блока элемента абсолютно одинакова. Единственное, чем отличаются различные модели — это правилами определения размеров элемента.

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

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

традиционная блочная модель блочная модель W3C
традиционная блочная модель блочная модель W3C

Конечно, такое разночтение нужно учитывать и устранять при верстке.

Определяем действительные размеры элемента

Традиционная блочная модель вопросов, как правило, не вызывает, все и так интуитивно понятно: элемент имеет такие размеры, какие мы ему задаем в CSS. Написали мы, допустим: «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» и все хорошо. Элемент действительно займет 100px, по 10 из них уйдет на отступы, а на оставшихся 80px уютно расположится контент.

Другое дело с блочной моделью W3C: здесь заданные в CSS размеры (width и height) и действительные размеры элемента не совпадают! А поскольку блочная модель W3C используется почти во всех браузерах, то без умения вычислять действительные размеры элемента для этой блочной модели много не наверстаешь.

Давай разберемся подробно из чего состоят размеры элемента в блочной модели W3C.

Рассмотрим высоту элемента:

вычисление действительной высоты элемента в блочной модели W3C

Из рисунка понятно, что действительная высота элемента рассчитывается так: border-top+padding-top+height+padding-bottom+border-bottom.

Действительная ширина элемента соответственно будет равна: border-left+padding-left+width+padding-right+border-right.

вычисление действительной ширины элемента в блочной модели W3C

Соответственно тот же пример «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» уже даст блок с общей шириной 120px! Так как width:100px означает именно 100px под контентную зону. Все отступы и границы добавляются к этому фиксированному значению.

Логика тоже ясна: главное в блоке — его содержимое. И если я сказал сто пикселей, значит сто, и никакие паддинги и бордеры мне ничего не поменяют!

На первый взгляд все легко и просто! Но не тут то было…

Как быть, например, в ситуации, когда width элемента равен 100%, а padding и/или border не равен 0? Тогда действительная ширина элемента будет больше 100%, а это далеко не всегда желательно.

Вот это и есть самая большая сложность блочной модели W3C: когда ширина указана в процентах, а padding и border в пикселях. Такую ситуацию нужно, если не избегать, то во всяком случае использовать пореже и с пониманием вопроса.

Управление блочной моделью

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

Материалы