Блоковая модель

Все HTML элементы могут считаться блоками.

Блоковая модель CSS

В CSS термин "блоковая модель" используется, когда речь заходит о дизайне и разметке веб-страницы.

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

Различные части на графике это

  • Content - Содержимое блока, где отображается текст, изображения и т.д.
  • Padding - Поля. Пустое пространство вокруг содержимого. Поля прозрачны
  • Border - Рамка. Идет вокруг полей и содержимого
  • Margin - Отступы. Пустое пространство за пределами рамки. Отступы прозрачны

Блоковая модель позволяет добавлять рамку вокруг элемента и определять пространство между элементами.

Пример использования блоковой модели:


div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

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

Чтобы правильно установить ширину и высоту HTML элемента, необходимо знать, как работает блоковая модель.

ВАЖНО! Когда вы определяете CSS свойства width и height, вы в действительности устанавливаете ширину и высоту только области содержимого. Чтобы вычислить полный размер элемента, вы должны добавить также размер полей, рамки и отступов.

В следующем примере полная ширина элемента <div> будет 350px:


div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Вот как это считается:

320px (ширина width)
+ 20px (левое + правое поле padding)
+ 10px (левая + правая рамка border)
+ 0px (левый + правый отступ margin)
= 350px

Полная ширина элемента рассчитывается следующим образом:

Полная ширина = ширина + левое поле + правое поле + левая рамка + правая рамка + левый отступ + правый отступ

Полная высота элемента рассчитывается следующим образом:

Полная высота = высота + верхнее поле + нижнее поле + верхняя рамка + нижняя рамка + верхний отступ + нижний отступ

От вас вовсе не требуется использовать все части блоковой модели, но стоит помнить, что эта модель применяется абсолютно ко всем HTML элементам веб-страницы, и это очень мощная вещь.