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 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 - inine - inline-block - inline-flex - inline-grid - 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 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 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 element of the inline type and is a container grid for the elements it contains (arrangement in the form of a grid). Refer to the detailed tutorial explanations on the grids page.

    This element is on a line  
    A
    B
    C
      while being a grid container
  • 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›(1) ☎ (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.

Common values:

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) The buttons are no longer accessible when display:contents is applied.

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

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

1

Samsung Internet

1

Androïd Brower

1

Chrome pour Androïd

1

Baidu Browser

1

QQ Browser

2

Safari

1

Safari sur IOS

Chrome

1

Edge

1

Firefox

1

Opéra Mobile

1

UC Browser pour Androïd

2

Opéra

1

Firefox pour Androïd

1

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.

See also.

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

Properties:

visibility
Langue française
Defines whether an element should be shown or hidden.