Блоковая модель (боксовая модель, box model)

Описание

В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.

В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. box model), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).

Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»

По умолчанию, если CSS-свойство box-sizing не задано, размер внутренней области с содержимым задается свойствами width, min-width, max-width, height, min-height and max-height. Если же свойство  box-sizing задано, то оно определяет, для какой области указаны размеры.

Поля элемента (padding area) — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (padding edge).

Размеры полей задаются по отдельности с разных сторон свойствами padding-top, padding-right, padding-bottom, padding-left или общим свойством padding.

Область рамки (border area) окружает поля элемента, а ее граница называется края рамки (border edge). Ширина рамки задается отдельным свойством  border-width или в составе свойства border. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.

Отступы (margin area) добавляют пустое пространство кокруг элемента и определяют расстояние до соседних элементов.

Величина отступов задается по отдельности в разных направлениях свойствами margin-top, margin-right, margin-bottom, margin-left или общим свойством margin.

Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing). Схлопываются только вертикальные отступы.

Для элементов с display: inline (или inline-block, inline-table) на занимаемое по высоте место также влияет значение свойства line-height.

Стандарты

Смотрите также

• Справочник по CSS
• Ключевые концепции CSS: Синтаксис CSS, @-правила, комментарии, специфичность и наследование, блочная модель, режимы компоновки и модели визуального форматирования, схлопывание отступов, начальные, вычисленные, решённые, указанные, используемые и действительные значения. Синтаксис определения значений, сокращённые свойства и замещаемые элементы.
• Связанные свойства: box-sizing, background-clip, height, max-height, min-height, width, max-height, min-height, padding, padding-top, padding-right, padding-bottom, padding-left, border, border-top, border-right, border-bottom, border-left, border-width, border-top-width, border-right-width, border-bottom-width, border-left-width, margin, margin-top, margin-right, margin-bottom, margin-left