Немного вспомним html и разберемся, что означает блоковая модель.

Вся суть в том, что в html есть блочные и строчные элементы. Блочные элементы это вообще отдельная структурная единица, отделяющаяся всегда абзацными отступами. Это значит, что нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и могут два строчных элемента легко расположиться на одной строке. Примером могут быть элементы strong , EM , I.

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

Применение блоков в создании сайта.

Каждый из таких блоков обязательно должен иметь информационную часть, или содержать в себе информацию в виде текста или изображения. Такую часть блока называют контентом. К примеру, для элемента P содержимым блока является текст абзаца.

Вокруг контента области могут быть абсолютно пустыми, все области которые не заняты – называют полями (margin). Если смотреть со стороны дизайна, то поля обеспечивают более привлекательный вид страницы. При наличии таких полей, страницы не прилегают к границам блоков. Такую же аналогию провести можно с полями, когда печатаем текст на бумаге. Если б поля отсутствовали, то текст начинался бы с самого краю. При наличии таких полей текст читать намного удобнее.

Сразу же за полями проходят и граница блока (border), которая способна иметь определенную толщину и стиль своих линий. Ширину вы можете выбирать сами – от нуля (граница в этом случае не видна) до выбранной вами (в единицах измерения длины). Стиль линии границы может быть любого вида и цвета, как вы пожелаете.

Так же в блоке доступны отступы (padding), его расценивают как дополнительное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не учитываются в ширине блока. А значит, что указывая ширину вашего блока, вы задаете ширину только для той части блока, которая отведена для содержимого.

С этим все ясно? Если да приступайте к практике. И не забывайте повторять уже пройденный материал.