HTML and CSS Reference
In-Depth Information
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
Value
Description
block
Treats the element as block-level.
inline
Treats the element as inline.
inline-block
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.
list-item
Used internally by browsers to create list items. Of no practical value
to web designers.
none
Removes the element and
all
its contents from display. You cannot
override this value in a child element.
table, inline-table, table-row,
table-cell, table-caption,
table-column, table-column-group,
table-row-group, table-header-
group, table-footer-group
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
description.
■
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.
Note
he
display
property is not inherited, so you can also use the
inherit
keyword to apply the same value as
the element's parent.
