Руководство по блочной модели в CSS

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

Они могут иметь разные свойства и могут взаимодействовать друг с другом по-разному, но каждый блок имеет область содержимого (content area) и необязательные окружающие области отступов (padding), границы (border) и поля (margin).

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

Свойство padding — это внутреннее прозрачное пространство между содержимым элемента и его границей (border) (или краем блока, если у него нет границы border), тогда как поле margin — это внешнее прозрачное пространство, внешний отступ вокруг элемента.

Кроме того, если элемент имеет background-color, он будет виден через область padding. Область margin всегда остается прозрачной, на нее не влияет цвет фона элемента, однако через нее будет видно цвет фона родительского элемента.

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

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

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

Подробнее о каждом из этих 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 */
}