CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS display Property

Topic: CSS3 Properties Reference« Prev|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 block | inline | inline-block | 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 | 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
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.
block The element generates a block element box.
inline The element generates one or more inline element boxes.
list-item The element (e.g., li in HTML) generates a block box for the content and a separate list-item inline box for the list marker.
Inline-block The element generates a block box that's laid out as if it were an inline box.
table The element behaves like the <table> HTML element.
inline-table The element behaves like a table that,s laid out as if it were an inline box.
table-caption The element behaves like the <caption> HTML element.
table-column The element behaves like the <col> HTML elements.
table-column-group The element behaves like the <colgroup> HTML elements.
table-header-group The element behaves like the <thead> HTML elements.
table-row-group The element behaves like the <tbody> HTML elements.
table-footer-group The element behaves like the <tfoot> HTML elements.
table-row The element behaves like the <tr> HTML elements.
table-cell The element behaves like the <td> HTML elements.
run-in

The element generates either a block box or an inline box, depending on the context.

  • If the run-in box contains a block box, the run-in box becomes a block box.
  • If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box.
  • Otherwise, the run-in box becomes a block box.
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:Internet Explorer 7 and earlier versions don't support the values inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group, and inherit. IE8 supports, but requires a valid <!DOCTYPE>. IE9 and above supports these values.


Further Reading

See tutorial on: CSS Display.

Related properties: visibility, float, position.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.