This section describes how boxes are laid out in the normal document
flow. It applies to elements whose
float property has
none, and whose
property has the value
relative, although in the latter case, additional
factors described in Relative Positioning must be taken
As we already saw in CSS Layout and Formatting, just as there are
block-level elements and inline elements in HTML, CSS boxes are also
either block or inline (although there are subtypes of each), as
determined by the element’s
display property value.
table will cause an element to generate a block
box and participate in a block formatting context.1
Other values, such as
inline-table, cause elements to generate inline
boxes, which participate in an inline formatting context.
run-in is special, because it can make
the generated box’s formatting either block or inline. A run-in box that
doesn’t contain a block box, and is followed by a sibling block box in the
normal document flow, becomes the first inline box of the sibling block
box (unless the sibling is or contains a run-in). Otherwise, the run-in
box becomes a block box. Run-in boxes are mainly intended for run-in
display for more information about
run-in and browser support.
inline-block generates a block box
that’s laid out as an inline box. On the inside, the box is a block box,
but on the outside, it’s an inline box. Similarly, the value
inline-table generates a table that’s laid out as an
none is a special case, because an
element with this display value will not generate any sort of box at all.
This means that no descendant element will be able to generate a box. It’s
important to note that applying the value
the same as using an invisible box; if you use
no box will be generated at all.
An absolutely positioned or floated element will, however, establish a new containing block and formatting context for its static children.