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: