создай свой первый сайтСайт создан на сервисе Яндекс.НародСайт создан на сервисе Sites.GoogleСайт создан на сервисе ucozСайт создан на html/css


Блоки: высота и ширина, границы, поля и отступы,
плавающие блоки

Есть такое понятие как контейнерный дизайн (или блочная верстка, div верстка), когда шаблон веб-страницы формируется из блоков.
Далее мы создадим такую страницу, а пока давайте познакомимся непосредственно с самими блоками и посмотрим, что с ними можно сделать.

Блоки (они же - контейнеры) образуются парными тегами <div>...</div> и возможностей для работы с ними довольно много.

Каждому блоку с помощью css можно назначить ширину и высоту. Например пусть к блоку присоединен стиль .navigation (подробнее о присоединении стилей к блокам), в котором заданы высота (height) и ширина (width).
.navigation {
height: 150px;
width: 350px;
}

Без указания в стиле этих параметров блок будет безразмерным (заполнять все пространство, в котором он находится).

Блокам можно задавать границы - задана граница толщиной 1 пиксель серого цвета сплошной линией (solid).
.navigation {
border: 1px solid #CCCCCC;
}

Очень часто для блоков задают поля (свойство margin - в наиболее общем виде это расстояние одного блока от другого, то есть снаружи от его границ) и отступы (padding - отступ содержимого блока от его края, то есть внутри от его границ).
.navigation {
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 8px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 8px;
}
Таким образом, данный блок (пусть для примера это панель навигации) будет иметь следующие параметры: поля (margin) снаружи блока по 15 пикселей сверху, справа и снизу и 8 пикселей слева и отступы (padding) от границ блока до его содержимого (текста и т.д.) по 5 пикселей сверху, справа и снизу и 8 пикселей слева.

Если у вас задан фон блоку, то он будет таким же на величину отступов, поля же прозрачны, своего фона у них нет.
Необходимо учесть также, что ширина и высота, задаваемые для блока пользователем не учитывают значения полей отступов (их величину нужно прибавлять к размерам блоков).
Блок также можно сделать плавающим. С помощью свойства float мы можем указать куда перемещаться блоку (влево, вправо, без перемещения).
В данном примере блок "плывет"-перемещается влево.
.navigation {
float: left;
}


Источник: 1sait.com