Блоковая модель (боксовая модель, box model)
Описание
В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Движок рендеринга в браузере определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.
В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. box model), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).
По умолчанию, если CSS-свойство box-sizing
не задано, размер внутренней области с содержимым задаётся свойствами width
, min-width
, max-width
, height
, min-height
и max-height
. Если же свойство box-sizing
задано, то оно определяет, для какой области указаны размеры.
Размеры полей задаются по отдельности с разных сторон свойствами padding-top
(en-US), padding-right
, padding-bottom
(en-US), padding-left
или общим свойством padding
.
Область рамки (border area) окружает поля элемента, а её граница называется края рамки (border edge). Ширина рамки задаётся отдельным свойством border-width
или в составе свойства border
. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.
Величина отступов задаётся по отдельности в разных направлениях свойствами margin-top
, margin-right
, margin-bottom
, margin-left
или общим свойством margin
.
Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing (en-US)). Схлопываются только вертикальные отступы.
Для элементов с display
: inline
(или inline-block, inline-table
) на занимаемое по высоте место также влияет значение свойства line-height
.
Стандарты
Стандарт | Статус | Примечание |
---|---|---|
CSS Level 2 (revision 1) | Рекомендация | Though more precisely worded, there is no practical change |
CSS Level 1 | Рекомендация |
Смотрите также
- Справочник по 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