Блочная модель

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

В примере мы видим два абзаца текста, для каждого из которых включено отображение границ и добавлен серый фон с помощью следующего правила:

p {border: 1px solid #333; background-color:#ЕЕЕ;}

Чтобы научиться не просто использовать XHTML-разметку, отображаемую браузером, необходимо понять, как можно контролировать внешний вид и расположение блоков элементов. Первый шаг на пути к этому - понимание принципа построения блочной модели.

С помощью CSS можно настроить три аспекта блочной модели:

• границу - толщину, цвет и тип границы;
• поля - расстояние между блоком и соседними элементами;
• отступы - расстояние между содержимым блока и его границей.

Попросту говоря, поля рассчитываются от границы наружу, а отступы - внутрь. Так как у блока четыре стороны, все свойства, связанные с полями, границей и отступами имеют по четыре значения.