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

Описание
--------

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

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

![CSS Box model](/ru/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel-(3).png)

**Внутренняя область** элемента (**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)
    + Сокращённые свойства
    + Замещаемые элементы
* Связанные свойства: `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`