CHAPTER 4 ■ BOX MODELSDisplay
Problem You want to fundamentally change how the browser renders an element. For example, you
want a block element rendered inline, as a list item, or as a table; or you do not want it to be
rendered at all—as if it never existed.
Solution You can use the display property to change how an element is rendered. You can use
display:none to prevent an element from being rendered. You can use display:inline to
render an element inline. You can use display:block or display:list-item to render an
element as a block or list item. You can use display:inline-block to render an inline
element as a block nested in a line.
Pattern SELECTOR { display:inline; }^
SELECTOR { display:inline-block; }
SELECTOR { display:block; }
SELECTOR { display:list-item; }
SELECTOR { display:none; }
Location This design pattern applies to all elements.
Limitations There are additional display types, but they are not well supported. Internet Explorer 7 does
not support run-in and inline-table. Internet Explorer 7 also does not support table,
table-cell, table-row, table-header-group, table-footer-group, table-row-group,
table-column-group, table-column, and table-caption.
Tips When you display an element as a list item, its parent needs to be rendered as a block and
needs to provide left padding or left margin for the marker. This is required because a list is
a two-part structure: an outer block, such as
- ,
- ,
- , or
- . You can assign a marker to it using list-style-type.
A browser renders a list-item as a block with an inline marker. When you want a list-
item to look like a block, you can simply turn off the marker using list-style-type:none—
you do not need to change the display type because a list is already a block. You may also
want to remove its parent’s padding and margin.
Example The example uses display:inline to render the blocks
and
- as inline boxes. It uses
display:inline-block to render the inline as an inline block. It uses
display:block to display the inline as a block. It uses display:list-item to render
the inline elements as list items. It assigns a marker to them using list-style-type.
It also assigns left padding to their parent to make room for the marker. Lastly, it uses
display:none to hide an image.
Related to Visibility (Chapter 6); Blocked (Chapter 11); Inlined, Run-in (Chapter 13); Tabled, Rowed,
and Celled (Chapter 15)
- , or
- , and an inner block, such as