Box CSS (Box)

Модель рамки CSS описывает, как интуитивно размещать элементы на веб-странице.

Что такое модель коробки

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

На следующем рисунке показано, как свойства margin, padding и border CSS определяют пространство, занимаемое элементом на веб-странице.

ширина и высота элементов

Обычно, когда вы используете CSS widthиheightПри установке свойств width и height элемента на самом деле вы устанавливаете ширину и высоту области содержимого элемента. Реальная ширина и высота элементного кадра зависят от нескольких факторов.

Реальное пространство, занимаемое элементным кадром, вычисляется следующим образом:

В следующих разделах приведены примеры использования различных свойств.