display

The display CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.

Some values of display are fully defined in their own individual specifications; see the table at the end of this document for links to all relevant specifications. The full list of values is as below.

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

Syntax

The display property is specified using keyword values. Keyword values are grouped into six value categories:

<display-outside>

These keywords specify the element’s outer display type, which is essentially its role in flow layout.

<display-inside>

These keywords specify the element’s inner display type, which defines the type of formatting context that its contents are laid out in (assuming it is a non-replaced element).

<display-listitem>

The element generates a block box for the content and a separate list-item inline box.

<display-internal>

Some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode.

<display-box>

These values define whether an element generates display boxes at all.

<display-legacy>

CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode.

<display-xul> Deprecated since Gecko 62

Firefox only values used primarily for styling XUL documents.

"Legacy" values of display

The Level 3 specification details two values for the display property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.

The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:

.container {
    display: inline flex;
}

This can currently be specified using a single value.

.container {
    display: inline-flex;
}

Formal syntax

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
where 
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Examples

The individual pages for the different types of value that display can have set on it feature multiple examples of those values in action — see the Syntax section.

In addition, you can find detailed explanations of the layout models that certain values enable elsewhere on MDN:

• CSS Grid Layout
• CSS Flexible box layout
• CSS Layout (beginner's learning module)

Accessibility concerns

display: none;

Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.

display: contents;

Browsers will remove any element with a display value of contents set on it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

• Display: Contents Is Not a CSS Reset | Adrian Roselli
• More accessible markup with display: contents — hiddedevries.nl

Tables

Changing the display value of a <table> element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.

• Short note on what CSS display properties do to table semantics — The Paciello Group
• Hidden content for better a11y | Go Make Things
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Block and Inline Layout in Normal Flow
• Formatting contexts explained
• visibility, float, position
• grid, flex