Блоковая модель (боксовая модель, 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 и max-height. Если же свойство box-sizing задано, то оно определяет, для какой области указаны размеры.

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

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

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

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

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

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

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

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