Блочные и строковые элементы   

В изложении элементов разметки языка HTML существует представление строкового (in-line) элемента разметки и блочного (block) элемента разметки. Официально они определены в DTD (Document Type Definition) SGML-изложения (Stadard Generalised Markup Language) языка HTML. Проще каждого объяснить отличие между блоком и строковым элементом дозволено на примере:

параграф - это блочный элемент разметки.
выделение курсивом - это строковый элемент разметки.

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

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

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

Элемент DIV

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

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

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

Текст в кавычках вложен вовнутрь элемента DIV дальнейшего вида:

<div style="border-color:#003366;
border-width:1px;
margin:20px;padding:10px;">
...
</div>

Использование элемента DIV не рекомендуется, если текст будет просматриваться браузерами, не поддерживающими CSS. В этом случае класснее применить параграф либо иной, подходящий по смыслу, элемент разметки из стандартного комплекта HTML.

Элемент 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>
и т.п.

В новых версиях браузера Netscape пересекать изложения строковых жанров невозможно. Таг конца элемента строкового типа закрывает ближайший элемент, а не тот, тот, что открыт тагом начала данного строкового жанра. Такое поведение в точности совпадает с использованием элемента SPAN, т.к. в последнем таг конца дозволено соотнести только с ближайшим тагом начала элемента span:

<b>предложение <i>с пересекающимися</b> стилями</i>
предложение с пересекающимися стилями

<span style="font-weight:bold;">предложение <span style="font-style:italic;">с пересекающимися</span> стилями</span>
предложение с пересекающимися стилями

Использование элемента SPAN ограничено браузерами, которые поддерживают CSS. При этом не все признаки спецификации CSS поддерживаются в различных браузерах. Скажем, признак vertical-align, тот, что призван заменить элементы SUP и SUB, не поддерживается ни одним из браузеров.

далее...