Easy Tutorial
❮ Jsref Prototype String Met Htmlcollection Nameditem ❯

Style display Property


Definition and Usage

The display property sets or returns the display type of an element.

Elements in HTML are mostly "inline" or "block" elements: An inline element has floating content on its left and right sides. A block element fills the entire line and has nothing displayed to its left or right.

The display property also allows authors to show or hide an element. Similar to the visibility property. However, if you set display:none, the entire element will be hidden, whereas if you set visibility:hidden, the element's content will be invisible but the element will retain its original position and size.

Syntax

Set the display property:

Return the display property:

Value Description
block The element is displayed as a block-level element.
compact The element is displayed as a block-level or inline element, depending on the context.
inherit The value of the display property is inherited from the parent element.
inline Default. The element is displayed as an inline element.
inline-block The element is displayed as a block box inside an inline box.
inline-table The element is displayed as an inline table (similar to <table>), with no line breaks before or after the table.
list-item The element is displayed as a list.
marker This value sets content as a marker before and after the box (used with the :before and :after pseudo-elements, otherwise it is the same as "inline").
none The element is not displayed.
run-in The element is displayed as a block-level or inline element, depending on the context.
table The element is displayed as a block-level table (similar to <table>), with line breaks before and after the table.
table-caption The element is displayed as a table caption (similar to <caption>).
table-cell The element is displayed as a table cell (similar to <td> and <th>).
table-column The element is displayed as a column of cells (similar to <col>).
table-column-group The element is displayed as a grouping of one or more columns (similar to <colgroup>).
table-footer-group The element is displayed as a table footer row (similar to <tfoot>).
table-header-group The element is displayed as a table header row (similar to <thead>).
table-row The element is displayed as a table row (similar to <tr>).
table-row-group The element is displayed as a grouping of one or more rows (similar to <tbody>).

Browser Support

All major browsers support the display property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Tips and Notes

Tip: If the element is a block element, its display type can be changed using the float property.


Example

Example

Set an element to be invisible when a button is clicked:


❮ Jsref Prototype String Met Htmlcollection Nameditem ❯