Export (0) Print
Expand All
top
Expand Minimize

display

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

See also

Concepts

float-offset

Other resources

::slot

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft