The display property is used in CSS and certain HTML elements. It specifies the type of rendering box used for an element. In HTML, the default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.
Values[]
| Value | Description |
|---|---|
none |
Turns off the display of an element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist. To render an element box's dimensions, yet have its contents be invisible, see the visibility property.
|
inline |
The element generates one or more inline element boxes. |
block |
The element generates a block element box. |
inline-block |
Introduced in CSS 2.1. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). |
list-item |
The element generates a block box for the content and a separate list-item inline box. |
run-in |
If the run-in box contains a block box, same as block. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box. If an inline box follows, the run-in box becomes a block box.
|
table |
Behaves like the HTML <table> element.
|
inline-table |
This value does not have a direct mapping in HTML. |
table-caption |
Behaves like the HTML <caption> element.
|
table-column, table-column-group |
These elements behave like the corresponding HTML <col /> and <colgroup> elements.
|
table-header-group, table-row-group, table-footer-group |
These elements behave like the corresponding HTML <thead>, <tbody>, and <tfoot> elements.
|
table-row |
Behaves like the HTML <tr> element.
|
table-cell |
Behaves like the HTML <td> element.
|
| Value | Description |
|---|---|
-moz-box |
Child elements are laid out horizontally or vertically. |
-moz-inline-grid |
Child elements are laid out as an XUL grid.
|
-moz-grid-group |
Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (-moz-box-orient) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.
|
-moz-grid-line |
Child elements are laid out as a single column or row of a grid. You can use the orientation (-moz-box-orient) to set which direction.
|
-moz-stack |
Child elements are laid out one on top of each other like the XUL stack element.
|
-moz-inline-stack |
Child elements, including inline-block, block, and -moz-inline-stack are laid out atop one another.
|
-moz-deck |
Child elements are laid out one on top of each other like the XUL deck element. Unlike a stack, only the top element is displayed.
|
HTML example:
TEXT <p style="display:none;">Invisible text.</p>
CSS example:
p {
display:none;
}