Существует два типа верстки – таблицами и div’ами. Первый способ чаще всего применялся, но в последнее время все чаще применяется верстка дивами. Это намного быстрее, эффективнее и более модно. В интернете эта структура называется BOX MODEL – коробочная модель. Зачем все это? Далее я буду писать уроки верстки, если вы не знаете что такое CSS и тег DIV вам не обойтись без этой информации просто никак. При помощи тега DIV мы можем аккуратно оформить любой элемент веб-страницы, так как у него много свойств – margin (граница), padding (отступ), border (рамка) и outline (внешняя линия)

Как вы видите на рисунке ниже, всего четыре отступа, да да – при помощи всех четырех элементов можно создать отступы, придав каждому элементу разный цвет. Вот пример.

CSS свойства тега DIV

Margin – граница, с помощью свойства margin мы может сделать отступ блока от внешних элементов, например при трехколоночной верстке сайта.

Padding – отступ внутри дива, можем задать например рамку и отступ текста от нее.

Border – при помощи этого свойства мы можем задать рамку вокруг текста или рисунка не только прямую линию, но а также штрих-пунктирную и другие, цвет рамки.

Outline – вроде border, применяется редко, я использую это свойство для совсем другого элемента.

Width – ширина элемента.

Height – высота элемента.

Вот какой код я использовал, чтобы добиться такого эффекта для заголовка блока

Этот код для оформления блока текста, который вы видите под блоком заголовка

Подводные камни, ошибки новичков

Некоторые новички, как и я раньше, частенько ошибаются при верстке html страниц при помощи CSS. Где же подводные камни при верстке дивами?

Вы заметили, что ширина блока заголовка 300 пикселей, а ширина блока текста всего 286 пикселей? Вот это и есть подводные камни.

Все дело в том, что ширина блока состоит из нескольких составляющих:

Высота блока соответственно:

Вот мы и имеем – 300 пикселей вычесть отступ слева 7 пикселей, вычесть отступ справа 7 пикселей = 286 пикселей. А рамка и там и там одинаковая, поэтому мы не берем ее в расчет. Помните свойством padding:7px мы скомбинировали все четыре составляющие padding-left, padding-right, padding-top, padding-bottom – все они по 7 пикселей. Ну вот в принципе и все, что требуется знать при верстке DIV’ами.