O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Element Display Roles

In addition to being replaced or not, there are two basic types of element display roles in CSS3: block-level and inline-level. All CSS3 display values fall into one of these two categories. It can be important to know which general role a box falls into, since some properties only apply to one type or the other.

Block-Level

Block-level boxes are those where the element box (by default) fills its parent element’s content area width and cannot have other elements to its sides. In other words, block-level elements generate “breaks” before and after the element box. The most familiar block elements from HTML are p and div. Replaced elements can be block-level elements but usually are not.

List items are a special case of block-level elements. In addition to behaving in a manner consistent with other block elements, they generate a marker—typically a bullet for unordered lists or a number for ordered lists—which is “attached” to the element box. Except for the presence of this marker, list items are identical to other block elements.

The display values that create block boxes are: block, list-item, table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, and (as of this writing) all CSS Advanced Layout templates.

Inline-Level

Inline-level boxes are those where an element box is generated within a line of text and does not break up the flow of that line. Perhaps the best-known inline element is the a element in HTML and XHTML. Other examples are span and em. These elements do not generate a break before or after themselves, so they can appear within the content of another element without disrupting its display.

Note that although the CSS block and inline elements have a great deal in common with HTML and XHTML block- and inline-level elements, there is an important difference. In HTML and XHTML, block-level elements cannot descend from inline-level elements, whereas in CSS, there is no restriction on how display roles can be nested within each other.

The display values that create inline boxes are: inline, inline-block, inline-table, and ruby. As of this writing, it was not explicitly defined that the various Ruby-related values (e.g., ruby-text) also generate inline boxes, but this seems the most likely outcome.

Run-In

A special case is run-in boxes, defined by display: run-in, which can generate either a block or an inline box depending on the situation. The rules that decide the outcome are:

  1. If the run-in itself contains a block box, the run-in generates a block box.

  2. If that’s not the case, and the run-in is immediately followed by a sibling block box that is neither floated nor absolutely positioned, the run-in box becomes the first inline box of the sibling block box.

  3. If neither condition applies, the run-in generates a block box.

In the case where a run-in is inserted as the first inline of its sibling block box (rule 2 above), it does not inherit property values from that block box. Instead, it continues to inherit from its structural parent element. Thus, if the sibling block box has color: green applied to it, the green will not be inherited by the run-in element even though it is visually a part of the block box.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required