HTML and CSS Reference
In-Depth Information
Element Display Roles
In addition to being replaced or not, there are two basic types of element display roles in
CSS3: block-leveland inline-level. All CSS3
display
values fall into one of these two cat-
egories. 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-levelboxesare those where the element box (by default) fills its parent element's con-
tent area width and cannot have other elements to its sides. In other words, block-level ele-
ments 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 con-
sistent 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 Lay-
out templates.
Inline-Level
Inline-levelboxesare 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, where-
as 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.
