CSS - 'Run in' Boxes

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

A run-in box behaves as follows:

  1. If the run-in box contains a block box, the run-in box becomes a block box.
  2. If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
  3. Otherwise, the run-in box becomes a block box.

Despite appearing visually as part of the following block box, a run-in element still inherits properties from its parent in the source tree.

Experimental - doesn't work everywhere

3 - Example

3.1 - run-in headers

A ‘run-in’ box is useful for run-in headers, as in this example:

h3 { display: run-in }
<h3>A run-in heading.</h3>
<p>And a paragraph of text that must not be in another line</p>


4 - Documentation / Reference