Умение применять блоковую модель CSS делает возможным сверстать сайт без использования HTML-таблиц. Насколько мы знаем из HTML существуют элементы блочные и строчные. С помощью блочных элементов создаются таблицы, заголовки, абзацы и, как правило всегда имеются отступы. Характерным для блочных элементов является то, что их нельзя расположить в одной строке. Строчные элементы можно располагать в одной строке и они не нуждаются в отступах (элементы strong , EM , I).

Недостаток HTML - это невозможность всегда правильно с отступами расположить блочные элементы на странице.

В CSS есть намного больше возможностей создания блоков на основе HTML с точным их позиционированием на странице. Благодаря CSS, отпадает необходимость использования таблиц, код становиться менее объёмным, легко читаемым и логичным.
Блоки имеют прямоугольную форму и представляют собой самостоятельную структурную единицу. Часть блоков структурно отделены от остальных, а часть может быть расположена внутри блоков.

Блоковая модель в технологии CSS

В содержимом блока обязательно имеется любая информация в виде текста, изображения и т.д. Блок имеет определенную фиксированную ширину (width) и высоту (height) а вокруг заданы пустые без контента области, называемые полями (margin), которые необходимы для придания содержимому лучшего вида. Например, при наличии полей margin контент не примыкает слишком близко к границам блока, что делает его привлекательным и читабельным для пользователя.

Далее за полями располагается рамка или граница блока (border), толщина (от простой до объемной линии) и стиль (имеет необходимый цвет) которой может задан нужными параметрами.
Вокруг границы блока занимают свободное пространство отступы (padding), размер которых можно менять.

Если необходимо задать отступ (padding) или поле (margin), только с одной стороны, то зона разбивается на 4 независимые друг от друга части:
padding-top - отступ сверху;
padding-right - отступ справа;
padding-bottom - отступ снизу;
padding-left - отступ слева;

Аналогично можно проделать и с полями: margin-top, margin-right, margin-bottom и margin-left.

Подведем итог:
- каждый блок включает содержимое, в котором имеется текст, изображения, таблицы и т.д.
- ширина содержимого блока зависит от заданной величины в пикселях или процентах, ширины полей (margin), толщины рамки (border) и отступов (padding).
- отступы, рамки и поля иногда имеют нулевые значения.
- если для нашего блока не были заданы фиксированные ширина и высота, то они будут равны ширине самого окна браузера.

Предыдущая - Типы селекторов в CSS