display

< css‎ | properties
Jump to: navigation, search

display

This article is Almost Ready.


W3C Recommendation

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.


Compatibility

There is no data available for topic "css", feature "display". If you think that there should be data available, consider opening an issue.


Examples

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

HTML

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

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

HTML

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

CSS

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:

CSS

@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:

CSS

@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 value Computed value
inline-table table
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

Specification Status Related Changes
CSS Display Module Level 3 Editor's Draft
CSS Level 2 (Revision 1) Recommendation

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article

Language: English