Блочная модель
Так как каждый создаваемый вами элемент представляет собой блок на странице, получается, что XHTML-страница по своей сути является набором блоков. По умолчанию границы каждого блока невидимы, а фон является прозрачным. С помощью CSS отображение границ и фона блоков можно легко включить. После этого вы увидите структуру страницы совсем в другом свете.
В примере мы видим два абзаца текста, для каждого из которых включено отображение границ и добавлен серый фон с помощью следующего правила:
p {border: 1px solid #333; background-color:#ЕЕЕ;}
Чтобы научиться не просто использовать XHTML-разметку, отображаемую браузером, необходимо понять, как можно контролировать внешний вид и расположение блоков элементов. Первый шаг на пути к этому - понимание принципа построения блочной модели.
С помощью CSS можно настроить три аспекта блочной модели:
• границу - толщину, цвет и тип границы;
• поля - расстояние между блоком и соседними элементами;
• отступы - расстояние между содержимым блока и его границей.
Попросту говоря, поля рассчитываются от границы наружу, а отступы - внутрь. Так как у блока четыре стороны, все свойства, связанные с полями, границей и отступами имеют по четыре значения.