CSS2 вводит значение run-in, еще один интересный гибрид блока/строки, который может сделать некоторые блочные элементы строковой частью следующего элемента. Эта возможность полезна для реализации некоторых эффектов, привычных в оформлении печатных текстов, когда заголовок выглядит как часть абзаца. В CSS можно сделать элемент инициальным, лишь изменив значение его свойства display и объявив следующий блок элемента структурным (block-level box). Заметьте, что я здесь веду речь о блоках, а не о самих элементах. Иначе говоря, не имеет значения, строковый это элемент или блочный. Важен только вид блока, генерируемого элементом. Элемент strong, для которого задано свойство display: block, генерирует структурный блок (block-level box); абзац, для которого задано display: inline, генерирует строковый блок (inline box).
Итак, перефразируем: если элемент генерирует инициальный блок и за ним следует структурный блок, то инициальный элемент будет строковым блоком в начале структурного блока. Например:
<h3 style="display: run-in; border: 1px dotted; font-size: 125%;
font-weight: bold;">Run-in Elements</h3>
<p style="border-top: 1px solid black; padding-top: 0.5em;">
Another interesting block/inline hybrid is the value <code>run-in</code>,
introduced in CSS2, which has the ability to take block-level elements and
make them an inline part of a following element. This is useful for certain
heading effects that are quite common in print typography, where a heading
will appear as part of a paragraph of text.
</p>
Поскольку элемент, следующий за h3, генерирует структурный блок, элемент h3 будет превращен в строковый элемент, располагающийся в начале содержимого элемента p. Обратите внимание, как размещаются рамки этих двух элементов. Эффект от применения run-in в данной ситуации совершенно такой же, как если бы вместо него применили следующую разметку:
<p style="border-top: 1px solid black; padding-top: 0.5em;">
<span style="border: 1px dotted; font-size: 125%; font-weight: bold;">Run-in
Elements</span> Another interesting block/inline hybrid is the value
<code>run-in</code>, introduced in CSS2, which has the ability to take block-
level elements and make them an inline part of a following element. This is
useful for certain heading effects that are quite common in print typography,
where a heading will appear as part of a paragraph of text.
</p>
Однако есть небольшое различие между инициальными блоками и этим примером разметки. Даже несмотря на то, что инициальные блоки форматируются как находящиеся в другом элементе строковые блоки, они все-таки наследуют свойства своего родительского элемента в документе, а не элемента, в который они помещены. Дополним наш пример и введем контейнер div и какой-нибудь цвет:
<div style="color: silver;">
<h3 style="display: run-in; border: 1px dotted; font-size: 125%;
font-weight: bold;">Run-in Elements</h3>
<p style="border-top: 1px solid black; padding-top: 0.5em; color: black;">
Another interesting block/inline hybrid is the value <code>run-in</code>,
introduced in CSS2, which has the ability to take block-level elements and
make them an inline part of a following element.
</p>
</div>
В этой ситуации h3 будет серебряным, а не черным. Дело в том, что он наследует значение цвета своего родительского элемента до того, как вставляется в абзац. Важно запомнить, что run-in будет работать, только если блок, следующий за инициальным блоком, является структурным блоком. Если нет, инициальный блок сам станет структурным. Таким образом, в результате применения следующей разметки элемент h3 будет оставаться или даже станет структурным блоком, поскольку значение свойства display для элемента table (как это ни странно) – таблица:
<h3 style="display: run-in;">Цены</h3>
<table>
<tr><th>Яблоки</th><td>$0.59</td></tr>
<tr><th>Персики</th><td>$0.79</td></tr>
<tr><th>Тыква</th><td>$1.29</td></tr>
<tr><th>Пирог</th><td>$6.99</td></tr>
</table>
Вряд ли автор когда-нибудь применит значение run-in к строковому элементу, но если это случится, элемент, скорее всего, сгенерирует структурный блок. Например, элемент em в следующей разметке стал бы структурным, поскольку за ним не следует структурный блок:
<p>
Это <em>на самом деле</em> лишнее, но вы могли бы сделать это, если бы захотели.
</p>
На момент написания данной книги поддержку run-in предлагают лишь несколько броузеров.