CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS display Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The display CSS property specifies the type of box generated by an element.

The following table summarizes the usages context and the version history of this property.

Default value: inline
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3

Usage Notes

  • The computed value of the display property may differ from the specified value for the root element and for floated or absolutely positioned elements.

  • If the value of display property is set to none — the element generates no boxes at all, and has no effect on layout; the element and its content are removed from the formatting structure entirely, and the document is rendered as though the element did not exist in the document tree.


Syntax

The syntax of the property is given with:

display inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit

The example below shows the display property in action.

div {
    display: inline;
}
span {
    display: block;
}

Property Values

The following table describes the values of this property.

Value Description
inline The element generates an inline-level box.
block The element generates a block-level box.
contents The element itself does not generate any boxes, but its children and pseudo-elements generate boxes and text runs as normal.
flex The element generates a block-level flex container box.
flow The element lays out its contents using flow layout (block-and-inline layout).
flow-root The element generates a block container box, and lays out its contents using flow layout.
grid The element generates a block-level grid container box.
inline-block The element generates a block box that's laid out as if it were an inline box.
inline-flex The element generates an inline-level flex container box.
inline-grid The element generates an inline-level grid container box.
inline-table The element behaves like a table that,s laid out as if it were an inline box.
list-item The element generates a block box for the content and a separate inline box for the list marker.
run-in The element generates either a block or an inline box, depending on the context.
table The element behaves like the <table> HTML element.
table-caption The element behaves like the <caption> HTML element.
table-column-group The element behaves like the <colgroup> HTML elements.
table-header-group The element behaves like the <thead> HTML elements.
table-footer-group The element behaves like the <tfoot> HTML elements.
table-row-group The element behaves like the <tbody> HTML elements.
table-cell The element behaves like the <td> HTML elements.
table-column The element behaves like the <col> HTML elements.
table-row The element behaves like the <tr> HTML elements.
none Turn off the display of an element. All child elements also have their display turned off, even if their display property is set to something other than none.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element display property.

Browser Compatibility

The display property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 7+

Warning: The values such as contents, flow-root, run-in, etc. are poorly supported in most of the browsers. You should better avoid using them for the time being.


Further Reading

See tutorial on: CSS Display.

Related properties: visibility, float, position.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties