Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

display

Summary

Specifies the type of rendering box used for an element. In HTML, default display property values are based on behaviors listed in the HTML specifications or from the browser or user’s default style sheet. The default value in XML is inline.

In addition to specifying one of the many different display box types, setting the display value to none lets you turn off (hide) the display of an element. A display element set to none ensures all descendant elements are also hidden. In these situations, the document renders as though the element does not exist in the document tree.

Overview table

Initial value
inline
Applies to
All elements
Inherited
No
Media
visual
Computed value
As specified, except for root element, floated elements, and absolutely positioned elements
Animatable
No
CSS Object Model Property
display
Percentages
???

Syntax

Values

display-value
A keyword that defines the rendering type to apply to the element. Possible values are none, inline, block, list-item, inline-block, inline-table, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, flex, inline-flex, grid, inline-grid, and run-in.
inherit
By default, the CSS display property is not inherited (“Inherited: no”). However, when the inherited property has been specified on an element (“Inherited: Yes”), the element uses the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property’s summary.
inline
An element set to inline generates one or more inline element boxes.
none
Turns off the display of an element (it has no effect on layout); all descendant 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, set the visibility property to hidden. This is a basic value in CSS 1.
list-item
Generates a block box for the content and a separate list-item. This is a basic value in CSS 1.
inline-block
The element generates a block element box that flows with surrounding content as if it were a single inline box–and behaves like a replaced element. This is a basic value in CSS 2.1.
inline-table
The inline-table value does not have a direct mapping in HTML. It behaves like a <table> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. This is a table model value in CSS 2.1.
table
Behaves like the <table> HTML element. It defines a block-level box. This is a table model value in CSS 2.1.
table-caption
Behaves like the <caption> HTML element. This is a table model value in CSS 2.1.
table-cell
Behaves like the <td> HTML element. This is a table model value in CSS 2.1.
table-column
Behaves like the <col> HTML element. This is a table model value in CSS 2.1.
table-column-group
Behaves like the <colgroup> HTML element. This is a table model value in CSS 2.1.
table-footer-group
Behaves like the <tfoot> HTML element. This is a table model value in CSS 2.1.
table-header-group
Behaves like the corresponding <thead> HTML element. This is a table model value in CSS 2.1.
table-row
Behaves like the <tr> HTML element. This is a table model value in CSS 2.1.
table-row-group
Behaves like the <tbody> HTML element. This is a table model value in CSS 2.1.
flex
Behaves like an block element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
inline-flex
Behaves like an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3.
grid
Behaves like a block element for laying out content in the grid model.

Note: At the time of this writing, most modern browsers do not support this property. This is a grid box model value (an experimental tag in CSS 3.0).

inline-grid
Behaves like an inline element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0).
run-in
The behavior depends on the following conditions:
  • 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 a inline box follows, the run-in box becomes a block box. .
block
Generates a block element box. This is a basic value in CSS 1.
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
Internet Explorer 10. Specifies a block-level flexible box (“flexbox”) container. For more information on flexbox containers, see Flexible Box (“Flexbox”) Layout.
-ms-inline-flexbox
Internet Explorer 10. Specifies an inline-level flexible box (“flexbox”) container. For more information on flexbox containers, see Flexible Box (“Flexbox”) Layout.
-ms-grid
Internet Explorer 10. Specifies a block-level Grid element. For more information on grid layout, see Grid Layout.
-ms-inline-grid
Internet Explorer 10. Specifies an inline-level Grid element. For more information on grid layout, see Grid Layout.

Examples

Change a span-element from its initial display inline to display as block-level element.

Some example text
<style>
  span {
    display: block;
  }
</style>

Second example

Do not display an element by using display: none;.

<div>Some example text</div>
<style>
  div {
    display: none;
  }
</style>

Third example

Specify the rendering type as block or inline to define how the element will display. Set the element to inherit the rendering values of its parent container:

p.block
{
display:block; //Sets the element to display in a box model rendering type.
}

p.inline
{
display:inline; //Sets the element to display inline inside the current element.
}

p.inherit
{
display:inherit; //Sets the display value to inherit its parent container's display values.
}

Usage

 Basic values in CSS 1
  • none
  • inline
  • block
  • list-item

Extended values in CSS 2.1

  • inline-block

Table model values in CSS 2.1

  • inline-table
  • table
  • table-caption
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

Flexbox model values in CSS3

  • flex
  • inline-flex

Grid box model values (experimental in CSS3)

  • grid
  • inline-grid

Experimental values

  • run-in

Related specifications

CSS Basic Box Model
Working Draft
CSS Grid Layout
Working Draft
CSS Flexible Box Layout Module
Candidate Recommendation
CSS Level 2 (Revision 1)
Recommendation
CSS Level 1
Recommendation

See also

Related articles

CSS Font

Fonts

Text

External resources

Notes

Remarks

To render an element box’s dimensions, yet have its contents be invisible, see the visibility property.

All visible HTML 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 elements are displayed on every page for a table that spans multiple pages.

You can use inline-block to give an object a layout without specifying the object’s height or width.

The Cascading Style Sheets (CSS) table display model does not require explicit elements to correspond with the HTML tags. For example, an element styled as display: table-cell does not need to be contained within a block that is styled display: table-row to be styled correctly. Implicit table elements are created as necessary in an attempt to make the document valid. Contrast this behavior to the traditional HTML table model, where table elements are implicitly closed early to avoid unexpected nesting.

Rendering for floating or absolute positioned elements

Specified valueComputed value
inline-tabletable
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblock
otherssame as specified