Блочные и строковые элементы
В описании элементов разметки языка 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, не поддерживается ни одним из браузеров.
далее...
Книги-online