CSS - 'Run in' Boxes

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

Example

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>

Documentation / Reference







Share this page:
Follow us:
Task Runner