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

• font-family

• font-kerning

• font-language-override

• font-size

• font-size-adjust

• font-style

• font-synthesis

• font-variant

• kerning-mode

• kerning-pair-threshold

• text-rendering

• text-underline

• user-modify

Fonts

• @font-face

• Font related properties

• font-variant

• font

• font-family

• font-feature-settings

• font-kerning

• font-language-override

• font-size

• font-size-adjust

• font-stretch

• font-style

• font-synthesis

• font-variant

• max-font-size

• min-font-size

• user-modify

• size

• font

Text

• block-progression

• font-language-override

• font-size

• font-synthesis

• hanging-punctuation

• hyphenate-limit-chars

• hyphenate-limit-lines

• hyphenate-limit-zone

• hyphens

• ime-mode

• layout-flow

• layout-grid

• layout-grid-char

• layout-grid-line

• layout-grid-mode

• layout-grid-type

• letter-spacing

• line-break

• max-font-size

• min-font-size

• text-overflow-ellipsis

• text-overflow-mode

• text-rendering

• text-underline-position

• text-underline-style

• text-underline-width

• user-input

• user-modify

• Text

• size

• b

• b

• br

• br

• caption

• cite

• code

• del

• dfn

• em

• font

• hr

• i

• ins

• kbd

• mark

• samp

• strong

• Achieving typographic effects with the canvas tag

External resources

• Quirksmode: The display property
• Mozilla Developer Network: CSS Reference: The display property

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