display property

Gets or sets a value that indicates whether and how the object is rendered.

Syntax

display: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | -ms-flexbox | -ms-inline-flexbox | -ms-grid | -ms-inline-grid | none

Property values

block

Object is rendered as a block element.

inline

Default. Object is rendered as an inline element sized by the dimensions of the content.

list-item

Object is rendered as a block element, and a list-item marker is added.

none

Object is not rendered.

table-header-group

Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.

table-footer-group

Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.

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.

table

Object is rendered as table.

inline-table

Object is rendered as table within an inline-block.

table-row

Object is rendered as tr.

table-row-group

Object is rendered as tBody. Table body is always displayed after table-header-group objects and before table-footer-group objects.

table-column

Object is rendered as col.

table-column-group

Object is rendered as colGroup.

table-cell

Object is rendered as cell (td) or header cell (th), depending on location within the table.

table-caption

Object is rendered as caption.

run-in

If the run-in box contains a block element, object is rendered as a block. If not, and the following sibling is a block (which is neither floating nor absolutely positioned), object is rendered as the first inline-block of the sibling. Otherwise, same as block.

ruby

Specifies that an element defines a ruby structure. This and the following values are from the CSS3 Ruby Module. This value only applies to the supported ruby elements, rt and ruby.

ruby-base

Specifies that an element defines a ruby base. This value only applies to the supported ruby elements, rt and ruby.

ruby-text

Specifies that an element defines a ruby text. This value only applies to the supported ruby elements, rt and ruby.

ruby-base-container

Specifies a container for one or more ruby base elements. This value only applies to the supported ruby elements, rt and ruby.

ruby-text-container

Specifies a container for one or more ruby text elements. This value only applies to the supported ruby elements, rt and ruby.

-ms-flexbox

Specifies a block-level flexible box ("flexbox") container. For more information on flexbox containers, see Flexible Box ("Flexbox") Layout.

-ms-inline-flexbox

Specifies an inline-level flexible box ("flexbox") container. For more information on flexbox containers, see Flexible Box ("Flexbox") Layout.

-ms-grid

Specifies a block-level Grid element. For more information on grid layout, see Grid Layout.

-ms-inline-grid

Specifies an inline-level Grid element. For more information on grid layout, see Grid Layout.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valueinline

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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/display.htm


<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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/tables.htm


<script type="text/javascript">
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">

See also

CSSStyleDeclaration
currentStyle
defaults
style
CSS Enhancements in Internet Explorer 6

 

 

Show:
© 2014 Microsoft. All rights reserved.