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 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 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.
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:
If the run-in itself contains a block box, the run-in generates a block box.
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.
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.
No credit card required