Display - Property CSS

display

Summary of characteristics of the display property

Quick description
Defines what the element is and how it is displayed.
Status
Standard
Usable for
HTML, SVG (1)
Predefined values
block | inline | list-item | run-in | contents | none | flex | grid | ruby | table | flow | flow-root | 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 | inline-block | inline-flex | inline-grid | inline-table
Percentages
Not applicable.
Initial value
inline
Inherited by default
No.
Animation type
Not animable: the display property cannot be animated.
W3C Module
CSS Display Module
References (W3C)
 🡇  
 🡅  
Document status: CR (Candidate Recommendation)
Document status: WD (Working Draft)
Document status: REC (Recommendation)
Document status: DEPR (Old specification, declared obsolete or superseded)

(1) Only a few values of display have an effect on an SVG image.

Description of the display property.

display defines how to display an element: as a frame, on the line of text, and so on. Each HTML element already has a default display mode, but the display property allows you to change this mode.

In practice, it is rare to change the nature of a very specific element, such as an array element but display is particularly useful in the following cases:

  • Make an element disappear (display:none )..
  • Declare a flex container. See the tutorial The flex-box.
  • Declare a container grid. See the tutorial grids.

This page is quite long, so use these links to go directly to the display value you're interested in:
block - contents - flex - flow - flow-root - grid - grid-lanes - inine - inline-block - inline-flex - inline-grid - inline-grid-lanes - inline-table - list-item - none - table - table-caption - table-cell - table-column - table-elements - table-column-group - table-header-group - table-row - table-row-group - ruby - ruby-base - ruby-text - ruby-base-container - ruby-text-container - run-in

Values for display.

  • display: none;

    The item will not be displayed at all. The place it would have occupied is available for other elements.

  • display: inline;

    The item appears on the line of text without causing a line break. The dimensions of the element are defined by its content: it is not possible to change the width or height of an inline element with the CSS width and height properties.

    Some HTML elements are displayed by default in inline mode: the links a, the input box input, the tag span, etc. img images are also inline elements (which is not obvious).

    Here's an
    inline element
  • display: block;

    The element is displayed as a block: it will be preceded and followed by a newline and, unless otherwise specified, it will occupy the entire available width.

    Many HTML elements are displayed by default in block mode: p paragraphs, titles h1, h2, h3..., div frames, as well as the section, article tags, etc.

    In the example below, the input tag that is normally of type inline has been changed to a block: there is a line break before and an after.

    Your name:
  • display: inline-block;

    The element behaves on the line like an inline element, but its contents are handled as if it were a block: possibility of defining its dimensions, margins, etc. See the example below:

    The element opposite
    Its content is managed like that of an element of the block type
    is of the inline-block type
  • display: list-item;

    The item is displayed as a list item, with a bullet or number. This is the default display mode for li elements.

    First item.
    Second item.
    Third item.
  • display: flex;

    The element behaves like a block element and is also a flex container for the elements it contains. See the detailed explanations on the The flex-box page.

    A
    B
    C
  • display: inline-flex;

    The element behaves like an inline element and is also a flex container for the elements it contains. See the detailed explanations on the The flex-box page.

    This element is on a line 
    A
    B
    C
      while being a flex container.
  • display: grid;

    The element behaves like a block element and organizes the elements it contains in the form of a grid. See the detailed explanations on the grids page.

    A
    B
    C
    D
  • display: inline-grid;

    The element behaves like an inline element for its parent, and is a grid container for the elements it contains (arranged in a grid layout).

    This element is on a line  
    A
    B
    C
      while being a grid container
  • display: grid-lanes; ⚠ display: masonry; ⚠

    These two values have the same meaning. The specification provides grid-lanes but several browsers have implemented masonry. It is a grid, but its cells have a fixed dimension only in one direction, defined by grid-template-columns or grid-template-rows.

    This new feature is still partially implemented (2025). To enable it on your browser:

    • Go to the address about://flags on a Webkit browser, or to about://config on Firefox.
    • Search in the search area masonry.
    • Set the CSS.masonry.layout flag to enabled.

    ⚠ In the example below, if all the cells in the grid have the same size, it means that your browser does not yet support masonry grids.

    🐠
    Lapin
    Araignée
    Serpent
    Coccinelle
    Oiseau
    Singe
    Singe
    🐤
  • display: inline-grid-lanes;

    The element behaves like an inline element for its parent, and is a grid-lanes container for the elements it contains.

  • display: contents;

    The element is not displayed and is further removed from the DOM. In other words, its children (the elements it contains) take its place in the parent/child hierarchy.

    For the purposes of the demonstration, we have applied a red background to the parent frame below. This color does not appear because this element has been given the display:contents; rule.

    A
    B
    C
  • display: table;

    The item is displayed as a table. This is the default display mode for table elements.

    In HTML, it is not recommended to use a tag other than table to define tables. Indeed, to display correctly, a table needs very specific internal elements, such as TR lines, TD cells, etc. It is therefore not enough to change the way the container is displayed.

    However, in this example, we only used div tags. It was necessary to change their display mode in table for the container, and in table-row and table-cell for the internal elements.

    A
    B
    C
  • display: inline-table;

    The element behaves like an inline element and is also an array container for the elements it contains.

    This is an element that takes place on a line of text  
    ABC
    DEF
      and behaves like a table for the elements it contains.
  • display: table-caption; display: table-header-group; display: table-footer-group; display: table-row-group; display: table-row; display: table-column; display: table-column-group; display: table-cell;

    All these values correspond to one of the constituents of an array.

    table-caption The title of the table. See also the CSS property caption-side to position the title relative to the table.
    table-header-group The header row(s) in a table. This is the default display mode for thead elements.
    table-footer-group The footline(s) of a table. This is the default display mode for tfoot elements.
    table-row-group The row(s) in the body of a table. This is the default display mode for tbody elements.
    table-row A table line. This is the default display mode for tr elements.
    table-column A table column. This is the default display mode for col elements.
    table-column-group A group of table columns. This is the default display mode for colgroup items.
    table-cell A table cell. This is the default display mode for td elements.
  • display: ruby;

    The element is displayed as a ruby container. In a nutshell, a ruby structure allows a short text to be displayed above each character of a sentence explanation or phonetic information. This presentation is widely used in Japanese, Korean, etc. but we can find other uses for it, as below:

    📧mail   ☎tel   📠fax   📱mobile  

    In HTML it is advisable to use the ruby tag, dedicated to the ruby notation, rather than changing the mode standard tag display This is because the ruby structure needs specific internal elements to display correctly: rb, rt, etc. It is therefore not enough to change the way the container is displayed.

  • display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container;

    Each of these values corresponds to one of the constituents of a ruby structure.

    ruby-base Default display mode for rb tags.
    ruby-text Default display mode for rt tags.
    ruby-base-container Default display mode for rbc tags.
    ruby-text-container ModDefault display mode for rtc tags.

    Here are some examples of ruby syntax. Ruby syntax is normally used with CJK characters, but we preferred to build our examples with graphic characters like a telephone.

    ‹ruby› ‹rb›☎‹/rb› ‹rt›Tel‹/rt› ‹/ruby› ☎ Tel
    ‹ruby› ‹rb›☎‹/rb› ‹rp›(‹/rp›‹rt›Tel‹/rt›‹rp›)‹/rp› ‹/ruby›(2) ☎ (Tel)

    (1) The rp element is not displayed. It is only useful on browsers that do not support ruby syntax. It designates the characters (often parentheses) that will be used to distinguish the text part (rt).

  • display: flow;

    Most browsers equate this value with block.

  • display: flow-root;

    The flow-root value generates a block container that encloses all of its contents. This solves the problem of a series of elements that have a floating element that may be larger than the text.

    Example for flow-root L'exemple d'une image flottante à gauche, et suivie d'un texte dont la hauteur est insuffisante pour couvrir la hauteur de l'image.
     
    Example for flow-root The next frame shifts to the right of the previous frame.
    Example for flow-root With display:flow-root this problem does not arise.
    Example for flow-root This image is correctly positioned below the previous one.
  • display: run-in; ⚠

    The element inserts at the beginning of the element that follows it. This allows for example to keep a title tag, for semantics, while inserting the title at the beginning of the following paragraph.

    ⚠ Careful! This value is not currently recognized by browsers.

    Title

    Next paragraph.

    The result should look like this (simulation):

    Title. Next paragraph.
  • display: initial; (inline) display: inherit; display: revert; display: revertLayer; display: unset;

    These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Interactive example with display.

The simulator applies the chosen value to both the container and the four internal elements. The result is not necessarily very significant because some values require a particular construction of the HTML code.

✗ The ms-grid value is only recognized by Internet Explorer, a browser that is now obsolete

display :
1
2
3
4

Browsers compatibility.

The display property is generally well supported by current browsers for values classics: block, inline, etc. Some values, such as contents, run-in, still pose compatibility problems.

Column 1
General support for the display property with most common values.
Column 2
Support for the contents value for the display property.
Column 3
Support for the run-in value for the display property.
Column 4
This value always establishes a new block formatting context for the element. It provides a better solution than clearfix hacking (see float).

Notes:

(1) Partial support : severe implementation bugs that renders content inaccessible for many element types.

(2) The buttons are no longer accessible when display:contents is applied.

1
display
property
2
contents
value
3
run-in
value
4
flow-root
value
Estimated overall support.
96%
12%
1%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

2

Samsung Internet

2

Androïd Brower

2

Chrome pour Androïd

2

Baidu Browser

1

QQ Browser

1

Safari

2

Safari sur IOS

Chrome

2

Edge

2

Firefox

2

Opéra Mobile

2

UC Browser pour Androïd

Opéra

2

Firefox pour Androïd

2

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse
Caniuse

display property historic.

The display property has been around since the very first version of CSS, but it has undergone quite a few developments to adapt to new features language, especially flex-box or grid layouts.

  • Cascading Style Sheets specification - Version 1

    This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.

    Regarding display. Initial property definition, with values block, inline, list-item and none.
    WD
    November 17, 1995
    Working Draft.
    PR
    November 12, 1996
    Proposed for recommendation.
    REC
    December 17, 1996
    Recommendation .
    DEPR
    September 13, 2018
    Old specification, declared obsolete.

  • Cascading Style Sheets Level 2 - Revision 1 Specification

    This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

    Regarding display. Adding the inline-block value.
    WD
    November 04, 1997
    Working Draft.
    PR
    March 24, 1998
    Proposed for recommendation.
    REC
    May 11, 1998
    Recommendation .

  • CSS Ruby Annotation Layout Module Level 1

    Regarding display. Adding specific values for Ruby annotations: ruby, ruby-base, ruby-text, ruby-base-container and ruby-text-container.
    WD
    February 16, 2001
    Working Draft.
    CR
    PR
    REC

  • CSS Display Module Level 3

    Regarding display. Adding new values.
    WD
    February 20, 2014
    Working Draft.
    CR
    August 28, 2018
    Candidate Recommendation.
    PR
    REC

See also.

The CSS Display Module specification module that describes the display property is very specific. It includes only a few properties:

Properties:

Display
Defines what the element is and how it is displayed.
⚠
reading-flow
Langue française
Defines the order in which the elements of the container will be read or traversed in the case of navigation with the tab key.
⚠
reading-order
Langue française
Sets the position of an element in the tab order, particularly for flexbox or grid children.
visibility
Defines whether an element should be shown or hidden.