Модель CSS-боксов

Модуль CSS-модели бокса определяет height, width, margin, и padding свойства, которые вместе с свойствами границ составляют CSS модель бокса.

Каждый видимый элемент на веб-странице — это бокс, выложенный в соответствии с моделью визуального форматирования. Свойства CSS определяют их размер, позицию и уровень стекирования, при этом свойства модели бокса (и другие) определяют внешний размер каждого бокса и пространство вокруг них.

Каждый бокс имеет прямоугольную область содержимого, внутри которой отображается текст, изображения и другое содержимое. Содержимое может быть окружено отступом, границей и отступом, с одной или нескольких сторон. Отступ находится вокруг содержимого, граница — вокруг отступа, а отступ расположен за пределами границы. Модель бокса описывает, как эти элементы — содержимое, отступ, граница и отступ — работают вместе, чтобы создать бокс, как отображается в CSS.

Модуль CSS-модели бокса определяет физические (или «относительные к странице») свойства, такие как width и margin-top. Свойства, относящиеся к потоку, такие как inline-size и margin-block-start (которые относятся к направлению текста), определены в Логических свойствах и значениях. Модуль модели бокса дополнен модулем CSS-размера бокса, который вводит значение «внутренний размер» и позволяет определять соотношения сторон для элементов, которые имеют размер по умолчанию как минимум по одной размерности.