Коробочная модель

2. Коробочная модель (Box Model)

В стандарте CSS 1, который был принят в 1996 году, W3C предложила все объекты на Web-странице считать заключёнными в виртуальную рамку (Box Model). Не важно при этом, является ли элемент абзацем, списком, заголовком, картинкой, выделением, элементом DIV или SPAN. Иными словами, все элементы, и блочные, и строчные имеют рамку вокруг содержимого, а также внутренние и внешние отступы от рамки.

Элементы DIV и SPAN играют особую роль при использовании языка CSS. Они позволяют выделять в документе структурные части и задавать для них специфические свойства.

Разница между DIV и SPAN только в одном: первый элемент — блочный, второй — строчный. Использование элемента SPAN позволяет задавать стилевые свойства даже отдельным словам и буквам.

Рассмотрим коробочную модель элемента подробнее. Термин “коробочная модель” (перевод Box Model), конечно, не слишком хорош, но другой вариант перевода (более распространённый) — “блочная модель” — вводит в заблуждение: ведь модель относится не только к блочным (block), но и к строчным (inline) элементам.

На иллюстрации левая часть рамки специально сделана прерывистой — в разрывах виден фон элемента (который распространяется на содержимое, внутренний отступ и рамку). То есть рамка накладывается на фон элемента.

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

Содержимое каждого элемента окружено внутренним отступом (задаётся свойством padding), рамкой (задаётся свойством border) и внешним отступом (задаётся свойством margin). Внешние отступы часто называют полями, а внутренние — просто отступами.

Фон элемента (задаётся свойством background) распространяется на:

содержимое,
внутренний отступ
и рамку.

Фон не распространяется на внешний отступ (который всегда прозрачный).

По умолчанию фон элемента прозрачный, а цвет рамки совпадает с цветом текста элемента (то есть со значением свойства color элемента).

Ниже будут рассмотрены CSS-свойства, которые позволяют управлять компонентами коробочной модели:

внешние отступы;
рамки;
внутренние отступы;
цвет;
фон;
ширина и высота содержимого.

В этой классификации для отступа (внешнего и внутреннего), а также для рамки использовано множественное число: отступы, рамки. Дело в том, что можно задавать отступ и рамку отдельно для каждой из четырёх сторон “коробки” элемента. Например, для описания ширины внешнего отступа предусмотрены четыре свойства: margin-top, margin-right, margin-bottom, margin-left.

Но существуют и обобщённые свойства, которые позволяют задавать значения сразу для всех четырёх сторон (для внешнего отступа — это свойство margin). В обобщённом свойстве допускается задавать 1, 2, 3 или 4 параметра через пробелы. При этом работает соглашение, которое мы будем называть правилом четырёх сторон:

Общий вид правила	Пример
	`margin:10px;` Задан внешний отступ шириной в 10 пикселов для всех четырёх сторон.
	`margin:10px 20px;` Сверху и снизу — 10 пикселов, слева и справа — 20 пикселов.
	`margin:10px 20px 30px;` Сверху — 10, справа — 20, снизу — 30, слева — 20.
	`margin:10px 20px 30px 40px;` Сверху — 10, справа — 20, снизу — 30, слева — 40.

Запомнить правило четырёх сторон можно так:

Одно значение — для всех четырёх сторон. Иначе начинаем сверху по часовой стрелке. Недостающие значения берём с другой стороны вертикали или горизонтали.