display (CSS property)

Syntax

display: { block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit }

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

  • block makes the element generate a block
    box.
  • inline makes the element generate one or
    more inline boxes.
  • inline-block makes the element generate a
    block box that’s laid out as if it were an inline box.
  • inline-table makes the element behave like
    a table that’s laid out as if it were an inline box.
  • list-item makes the element generate a
    principal block box and a list-item inline box for the list
    marker.
  • 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 makes the element behave like a
    table.
  • table-caption makes the element behave like
    a table caption.
  • table-cell makes the element behave like a
    table cell.
  • table-column makes the element behave like
    a table column.
  • table-column-group makes the element behave
    like a table column group.
  • table-footer-group makes the element behave
    like a table footer row group.
  • table-header-group makes the element behave
    like a table header row group.
  • table-row makes the element behave like a
    table row.
  • table-row-group makes the element behave
    like a table body row group.
  • 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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments

Comments on this post are closed.