display

Article
10/10/2017

Sets whether the object is rendered.

Syntax

{ display: sDisplay }

Possible values

sDisplay

String that specifies or receives one of the following values:

block	Object is rendered as a block element.
box	Object is rendered as a block-level flexible box element.
inline	Default. Object is rendered as an inline element sized by the dimensions of the content.
inline-block	Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
inline-box	Object as rendered as an inline flexible box element.
list-item	Object is rendered as a block element, and a list-item marker is added.
none	Object is not rendered.
table	Object is rendered as a table.
table-caption	Object is rendered as caption.
table-cell	Object is rendered as td or th, depending on the location of the object within the table.
table-column	Object is rendered as col.
table-column-group	Object is rendered as colgroup.
table-footer-group	Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each page spanned by a table.
table-header-group	Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each page spanned by a table.
table-row	Object is rendered as tr.
table-row-group	Object is rendered as tbody.

This property has a default value of inline for all objects with the following exceptions:

address	block	blockquote	block	body	block
center	block	col	block	colgroup	block
dd	block	dir	block	div	block
dl	block	dt	block	fieldset	block
form	block	frame	none	hn	block
hr	block	iframe	block	legend	block
li	list-item	listing	block	menu	block
ol	block	p	block	plaintext	block
pre	block	table	block	tbody	none
td	block	tfoot	none	th	block
thead	none	tr	block	ul	block
xml	block

This property is not inherited.

Remarks

All visible HTML objects are block or inline. For example, a DIV object is a block element, and a SPAN object is an inline element. Block elements typically start a new line and can contain other block elements and inline elements. Inline elements do not typically start a new line and can contain other inline elements or data. Changing the values for the display property affects the layout of the surrounding content by:

Adding a new line after the element with the value block.
Removing a line from the element with the value inline.
Hiding the data for the element with the value none.

In contrast to the visibility property, display=none reserves no space for the object on the screen.

The table-header-group and table-footer-group values can be used to specify that the contents of the thead and tfoot objects are displayed on every page for a table that spans multiple pages.

Examples

This example shows the effect of changing the values for the display property between inline, block, and none:

<span id=ospan>This is a span</span> in a sentence.
<p>
<input type=button value ="Block" onclick="ospan.style.display='block'">
:

This example uses function calls to hide and show table rows and cells:

<script>
function getPets()
{
    oRow1Cell2.style.display="none";
    oRow2Cell2.style.display="block";
    oRow3Cell2.style.display="none";
}
</script>
:
<table>
<tr id="oRow1"><td>Horses</td>
<td id="oRow1Cell2">Thoroughbreds</td>
<td>Fast</td></tr>
<tr id="oRow2"><td>Dogs</td>
<td id="oRow2Cell2">Greyhounds</td>
<td>Fast</td></tr>
<tr id="oRow3"><td>Marsupials</td>
<td id="oRow3Cell2">Opossums</td>
<td>Slow</td></tr>
</table>
:
<input type=button onclick="getPets()" value ="Show household pets">

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371238.xtlink_newWindow(en-us,Expression.40).png .

Applies to

a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frame, hn, hr, html, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

display

Syntax

Possible values

Remarks

Examples

Standards information

Applies to

See also

Concepts

Other resources

Additional resources