Этот пример может выглядеть после форматирования так:
short Description goes here
too long for the margin
Description goes here
Свойство 'text-align' можно использовать для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') или по центру поля ('center'). Значение 'justify' не применяется и обрабатывается или как 'left', или как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').
Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.
Бокс run-in ведёт себя так:
[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.
[x]. Иначе бокс run-in становится боксом блока.
Бокс 'run-in' используется для run-in-заголовков, как в этом примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Пример бокса run-in</TITLE>
<STYLE type="text/css">
H3 { display: run-in }
</STYLE>
</HEAD>
<BODY>
<H3>Заголовок run-in. </H3>
<P>И параграф текста,
следующий за ним.
</BODY>
</HTML>
Этот пример может форматироваться так:
Заголовок run-in. И
параграф текста,
следующий за ним.
Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.
Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.
'display'
Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Начальное: inline
Применяется: все элементы
Наследуется: нет
Процентное: N/A
Носитель: все
Значения этого свойства имеют следующий смысл:
block
Элемент генерирует основной бокс блока.
inline
Элемент генерирует один или более инлайн-боксов.
list-item
Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.
marker
Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.
none
Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.
Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.
run-in и compact
Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).
Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.
Несколько примеров свойства 'display':
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none } /* Не выводить изображения */
Соответствующие ПА HTML могут игнорировать свойство 'display'.
В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования:
1Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.
2Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.
3Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.
Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы более доступными, позволяя избегать трюков разметки (например, невидимых изображений), используемых для создания эффектов отображения.
Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.
'position'
Значение: static | relative | absolute | fixed | inherit
Начальное: static
Применяется: ко всем элементам, но не к генерируемому содержимому
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Значения имеют следующий смысл:
static
Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.
relative
Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.
absolute