This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

display

Summary

This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties.

Overview table

Initial value
inline
Applies to
All elements.
Inherited
No
Media
visual
Computed value
See individual properties.
Animatable
No

CSS Object Model Property
:

Percentages
See individual properties.

Syntax

  • display: block
  • display: flex
  • display: grid
  • display: inherit
  • display: inline
  • display: inline-block
  • display: inline-flex
  • display: inline-grid
  • display: inline-list-item
  • display: list-item
  • display: none
  • display: table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

Values

inline
Generates one or more inline element boxes.
block
Generates a block element box.
list-item
Generates a principal block box and a marker box.
inline-list-item
Generates an inline principal block box and a marker box.
inline-block
Generates a block element box that flows with surrounding content as if it were a single inline box–and behaves like a replaced element.
flex
Generates a block element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See flex.
inline-flex
Generates an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See flex.
grid
Generates a block element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See grid.
inline-grid
Generates 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). See grid.
none
Causes an element to not appear in the formatting structure and have no effect on layout. Descendant elements and their content are likewise removed from the formatting structure. (This behavior cannot be overridden by setting the display property on the descendants.) Note: A display value of “none” does not create an invisible box; it creates no box at all. To render an element box’s dimensions, yet have its contents be invisible, use the visibility property; see visibility.
inherit
Causes an element to use the specified or computed value of that property on its parent element.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption
These values cause an element to behave like a table element, subject to certain restrictions. See the W3C tables specification.

Examples

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

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

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

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

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 {
    /* Sets the element to display in a box model rendering type. */
    display:block;
}

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

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

Mobile-adapt a table, suppressing column headers and re-inserting text next to vertically stacked cells:

@media (max-width:400px) {
    /* stack cells vertically... */
    table, tr, td, th, tbody { display: block }
    /* ...but hide column headers */
    thead { display: none }
    /* insert column header text next to content */
    td::before { font-weight: bold }
    td:nth-of-type(1)::before { content: "Column 1: " }
    td:nth-of-type(2)::before { content: "Column 2: " }
    td:nth-of-type(3)::before { content: "Column 3: " }
    td:nth-of-type(4)::before { content: "Column 4: " }
}

Stack generously sized links in mobile interface to extend the touch zone to the full width of the screen:

@media (max-width:400px) {
    a[href] {
        display: block;
        padding: 12px;
        border-radius: 12px;
        margin: 6px;
        text-decoration: none;
        color: #000;
        background-color: #fff;
        background-image: url(/img/nav_icon.png);
        background-position: 90% center;
    }
}

Notes

Computed value and relationship between display, position, and float

  • If ‘display’ has the value 'none’, then ‘position’ and ‘float’ do not apply. In this case, the element generates no box.
  • Otherwise, if ‘position’ has the value ‘absolute’ or 'fixed’, the box is absolutely positioned, the computed value of ‘float’ is 'none’, and display is set according to the table below. The position of the box will be determined by the 'top’, 'right’, ‘bottom’ and ‘left’ properties and the box’s containing block.
  • Otherwise, if ‘float’ has a value other than 'none’, the box is floated and ‘display’ is set according to the table below.
  • Otherwise, if the element is the root element, ‘display’ is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of ‘list-item’ becomes a computed value of ‘block’ or 'list-item’.
  • Otherwise, the remaining ‘display’ property values apply as specified.
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-block|block|
|others|same as specified|

Table-designated elements
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.

Related specifications

CSS Display Module Level 3
Editor’s Draft
CSS Level 2 (Revision 1)
Recommendation

Attributions