Граница

У каждого блочного элемента разметки есть граница. От границы отсчитываются отступы (margin и padding). Вдоль границы "плавающего" блока происходит его обтекание текстом.

Для описания границ блоков применяются следующие атрибуты:

border-top-width: ширина верхней границы блока.

border-bottom-width: ширина нижней границы блока.

border-left-width: ширина левой границы блока.

border-right-width: ширина правой границы блока.

border-width: ширина границы блока. Задается в том случае, если ширина границы блока одинаковая по всему периметру блока

border-color: цвет границы блока. Согласно спецификации CSS он может быть задан для каждой из границ блока. Например, border-right-color:red.

border-style: тип линии границы блока. Может принимать значения: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Согласно спецификации CSS может быть задан для каждой из границ блока. Например, border-right-style:dotted.

Для описания границы нет необходимости указывать в стиле все атрибуты. Существует сокращенная запись атрибутов. Например, для описания верхней линии границы можно применить запись типа:

p {border-top:1px dotted red;} /* ширина_линии тип_линии цвет_линии */

Если необходимо ограничить блок текста границей, то это может выглядеть примерно так:

p {text-align:left;border-width:2px;

border-color:darkred;border-style:solid;}

Обтекание блока текста

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

"Обтеканием" блока текста другим текстом управляют два атрибута CSS: float и clear.

Атрибут float определяет плавающий блок текста. Он может принимать значения:

left - блок прижат к левой границе охватывающего блок элемента,

rigth - блок прижат к правой границе охватывающего блок элемента,

both - текст может обтекать блок с обеих сторон.

Второй атрибут описания стилей clear позволяет управлять собственно обтеканием. Он запрещает наличие плавающих блоков около блока текста. Атрибут может принимать значения: right, left, none, both:

<p style='clear:right;text-align:justify;'>У этого блока текста не может быть \"плавающего\" правого блока, т.к. мы его запретили. По этой причине он начинается ниже прижатого вправо ограниченного блока

Внешние отступы

Внешний отступ (margin) может отсчитываться по любому направлению относительно сторон блока:

margin-left: левый внешний отступ.

margin-right: правый внешний отступ.

margin-top: верхний внешний отступ.

margin-bottom: нижний внешний отступ.

margin: задает общий внешний отступ от всех сторон блока текста. Применяется в случае равноудаленности блока текста от всех границ.

Примеры использования описания стиля для параграфа

p {margin-left:50px;margin-right:5px;

margin-top:15px;margin-bottom:50px;

padding:0px;text-align:left;}

Если размер всех внешних отступов одинаковый, то можно просто воспользоваться атрибутом margin:

p {margin:5px;}

При применении внешнего отступа следует помнить, что он отсчитывается от границы элемента до границы внутреннего отступа ("набивки", padding) охватывающего элемента. Если не учитывать этого факта, то общая ширина видимых полей может оказаться больше, чем указано во внешнем отступе.