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

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

В описании элементов разметки языка 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 style="border-color:#003366;
border-width:1px;
margin:20px;padding:10px;">
...
</div>

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

Элемент SPAN

Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. Приведем примеры таких соответствий:

В новых версиях браузера 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, не поддерживается ни одним из браузеров.

далее