HTML and CSS Reference
Changing Layout with the display Property
As I explained at the beginning of this chapter, CSS treats all elements as boxes, the two main types being block-
level and inline. The other types of boxes supported by all browsers are table elements and list items. It's likely
that other types of boxes will be added in the CSS3 box model, but in this chapter I intend to concentrate on what
browsers currently implement rather than speculate on what might happen in the future.
You should be familiar with table elements and list items from HTML. Table elements are organized in rows
and columns. In the table box model, the height of each row and width of each column are determined by the
tallest and widest elements, respectively. What distinguishes the list item box model is the presence of a marker
box for the bullet or number alongside the content block.
By default, every HTML element is treated as one of these types of boxes: block-level, inline, table element,
or list item. However, the display property gives you the power to change an element's box type by using one of
the values listed in Table 6-6 .
Table 6-6. Values Supported by the display Property
Treats the element as block-level.
Treats the element as inline.
Treats the element as a block, but displays it inline. The block's height
and vertical padding and margins affect the height of the line in which
it is displayed.
Used internally by browsers to create list items. Of no practical value
to web designers.
Removes the element and all its contents from display. You cannot
override this value in a child element.
table, inline-table, table-row,
Causes the element to behave like the equivalent table element.
Not supported in IE 6 or IE 7. See Chapter 12 for a more detailed
■ CSS2.1 also proposed run-in as a value for the display property. This treats a block-level element like
a run-in headline, which begins on a new line of its own, but allows the next block-level element to run straight on.
The W3C dropped it from the final specification because no browser managed to support it completely.
he display property is not inherited, so you can also use the inherit keyword to apply the same value as
the element's parent.