Fandom

HTML & CSS Wiki

Display

649pages on
this wiki
Add New Page
Comments0 Share

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.

ValuesEdit

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.


Mozilla CSS Extensions
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;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.