Элемент span

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

В новых версиях браузера пересекать описания строковых стилей нельзя. Тег конца элемента строкового типа закрывает ближайший элемент, а не тот, который открыт тегом начала данного строкового стиля. Такое поведение в точности совпадает с применением элемента SPAN, т.к. в последнем тег конца можно соотнести только с ближайшим тегом начала элемента span: <b>предложение <i>с пересекающимися</b> стилями</i> предложение с пересекающимися стилями <span style="font-weight:bold;">предложение <span style="font-style:italic;">с пересекающимися</span> стилями</span> предложение с пересекающимися стилями

Свойства блоков

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

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

Графически свойства можно представить следующим образом:

В данном примере внутри окна браузера расположен блочный элемент(DIV), внутрь которого помещен еще один блочный элемент(P). DIV имеет белый фон и границу. Параграф имеет границу и желтый фон.

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

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

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

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

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

"Плавающий" текстовый блок позволяет реализовать возможность обтекания этого блока текстом. Блок текста с точки зрения размещения на странице равноценен картинкам или прямоугольным областям приложений.

Отступы(margin)

При отображении блока текста на листе бумаги вокруг него обычно оставляют поля. Поля есть и в ученических тетрадях, и в больших серьезных книгах. Поля можно задавать либо относительно границы страницы, либо относительно самого блока текста. В первом случае мы имеем дело с "набивкой" (padding), а во втором - с отступом (margin). Собственно, ширина поля будет определяться суммой ширины "набивки" и ширины отступа:

Обычно пунктирная линия и граница блока являются невидимыми линиями. Они угадываются по выровненному краю текста. Вернее угадывается суммарная ширина полей. Стрелки указывают направление отсчета отступа. Padding отсчитывается от внешней границы блока внутрь блока, в то время как margin от внешней границы блока в область охватывающего его блока (наружу).

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

margin-left:

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

margin-right:

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

margin-top:

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

margin-bottom:

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

margin:

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

Графически эти отступы можно представить следующим образом:

В данном случае для параграфа использовалось следующее описание стиля: p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px;text-align:left;}

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

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