Обобщенные блоковые и строковые элементы разметки

Формально понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки определены в DTD (Document Type Definition) языка разметки.

По набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.

Элемент div

Элемент div выступает в качестве универсального блока. Он всегда отделен от прочих элементов страницы (контекста) пустой строкой. Элемент div не несет никакой смысловой нагрузки. Часто говорят, что div - это раздел страницы. Но реально его применение осмысленно только в контексте CSS. Никаких правил умолчания для отображения div не существует. Это просто новая строка текста.

Элемент div позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:

Ниже приведен пример задания блочного элемента div. Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки.

<div style="border-color:#003366;

border-width:1px;

margin:20px;

padding:10px;">

</div>

Элемент span

Элемент разметки span - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: font, i, b, u, sub, sup и т.п. Приведем примеры таких соответствий:

HTML-элемент	CSS-аналог
<font color=red> ... </font>	<span style="color:red;">...</span>
<i>...</i>	<span style="font-style:italic;">...</span>
<b>...</b>	<span style="font-weight:bold;">...</span>
<u>...</u>	<span style="text-decoration:underline;"> ... </span>
и т.п.

Применение элемента span ограничено браузерами, которые поддерживают CSS.

Свойства блочных элементов

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

Блок текста обладает свойствами: высоты(height), ширины(width), границы(border), отступа(margin), набивки(padding), произвольного размещения(float), управления обтеканием(clear).

Ширина и высота блока текста они могут в типографских пунктах(pt), пикселях(px) и условных единицах(em):

<div style="width:200px;">пиксели</div>

<div style="width:200pt;">типографские пункты</div>

<div style="width:5em;">условные единицы</div>

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

Расстояние от границы блочного элемента до границы вложенного в него блочного элемента назыается padding. Для обозначения этого свойства может употребляться слово "набивка" или словосочетание "внутренний отступ".

Отступ от "набивки" внешнего блочного элемента до границы вложенного элемента называется margin. Для его обозначения мы будем употреблять термин "отступ" или словосочетание "внешний отступ".

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

Отступы и "набивка" могут быть левыми, правыми, верхними и нижними. CSS позволяет варьировать любые из них.

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

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

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

Ниже приведен пример применения padding (левый внутренний отступ текста в параграфе):

p { padding-left:100px;

text-align:left;

border-width:1px;

}

У блока существует четыре стороны. Соответственно padding может быть:

padding-left: левый внутренний отступ, который определяет расстояние от левого края блока до его содержания.

padding-right: правый внутренний отступ, который определяет расстояние от правого края блока до его содержания.

padding-top: верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания.

padding-bottom: нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания.

padding: определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера поля отступа от всех сторон блока.

Проиллюстрируем применение padding примером:

p { padding-left:100px;

padding-right:50px;

padding-top:20px;

padding-bottom:10px;

text-align:left;

border-width:1px;

}