Каждый элемент, который может отображаться на веб-странице, состоит из одного или нескольких прямоугольных блоков. Блочная модель CSS обычно описывает, как эти прямоугольные блоки размещаются на веб-странице.
Они могут иметь разные свойства и могут взаимодействовать друг с другом по-разному, но каждый блок имеет область содержимого (content area) и необязательные окружающие области отступов (padding), границы (border) и поля (margin).
На следующем изображении показано, как CSS-свойства width
, height
, padding
, border
и margin
определяют, сколько места может занимать элемент на веб-странице.
Свойство padding
— это внутреннее прозрачное пространство между содержимым элемента и его границей (border
) (или краем блока, если у него нет границы border
), тогда как поле margin
— это внешнее прозрачное пространство, внешний отступ вокруг элемента.
Кроме того, если элемент имеет background-color
, он будет виден через область padding
. Область margin
всегда остается прозрачной, на нее не влияет цвет фона элемента, однако через нее будет видно цвет фона родительского элемента.
Ширина и высота элементов
Обычно, когда вы устанавливаете ширину и высоту элемента, используя CSS-свойства width
и height
, в действительности вы устанавливаете только ширину и высоту области содержимого этого элемента. Фактическая ширина и высота блока элемента зависит от нескольких факторов.
Фактическое пространство, которое блок элемента может занять на веб-странице, рассчитывается следующим образом:
Box Size | CSS-свойства |
---|---|
Total Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
Total Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
Подробнее о каждом из этих CSS-свойств вы узнаете в следующих главах руководства.
Теперь давайте посмотрим следующий пример, чтобы понять, как на самом деле работает блочная модель:
div {
width: 300px;
height: 200px;
padding: 15px; /* set padding for all four sides */
border: 10px solid black; /* set border for all four sides */
margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}
В блочной модели CSS область содержимого поля элемента (content area) — это область, где появляется только его содержимое, например текст, изображение, видео и т. д. Она также может содержать элементы-потомки.