Display Properties

Description:
This property controls the type of box an element generates.

The computed value may differ from the specified value for the root element and for floated or absolutely positioned elements; see The Relationship Between display, position, and float for details about the relationship between the display, float, and position properties.

Note that a user agent style sheet may override the initial value of inline for some elements.

Example:

The following rule will cause a elements that are descendants of the .menu element to render as block elements instead of inline elements:

.menu a {
  display: block;
}


Value:

blockblock makes the element generate a block box.

inline
inline makes the element generate one or more inline boxes.

inline-block
inline-block makes the element generate a block box that’s laid out as if it were an inline box.

inline-table
inline-table makes the element behave like a table that’s laid out as if it were an inline box.

list-item
list-item makes the element generate a principal block box and a list-item inline box for the list marker.

run-in
A value of run-in makes the element generate either a block box or an inline box, depending on the context. If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of the sibling block box. Otherwise, the run-in box becomes a block box.

table
table makes the element behave like a table.

table-caption
table-caption makes the element behave like a table caption.

table-cell
table-cell makes the element behave like a table cell.

table-column
table-column makes the element behave like a table column.

table-column-group
table-column-group makes the element behave like a table column group.

table-footer-group
table-footer-group makes the element behave like a table footer row group.

table-header-group
table-header-group makes the element behave like a table header row group.

table-row
table-row makes the element behave like a table row.

table-row-group
table-row-group makes the element behave like a table body row group.

none
A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.