Бокс compact ведёт себя так:
[x].Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact , то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction' , специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.
[x].В ином случае compact-бокс становится боксом блока.
Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого cтрочного бокса блока, но влияет на расчёт высоты cтрочного бокса . Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно cтрочного бокса . Позиция compact-бокса по горизонтали - всегда в поле бокса блока.
Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float .
Следующий пример иллюстрирует compact-бокс:
A compact box example DT { display: compact } DD { margin-left: 4em }
Short
Description goes here.
too long for the margin
Description goes here.
Этот пример может выглядеть после форматирования так:
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-заголовков, как в этом примере:
Пример бокса run-in H3 { display: run-in }
Заголовок run-in.
И параграф текста, следующий за ним.
Этот пример может форматироваться так:
Заголовок 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 содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.
Читать дальше