Display - Propriété CSS

display

Résumé des caractéristiques de la propriété display

Description rapide
Définit la nature de l'élément et la façon de l'afficher.
Statut
Standard
Utilisable sur
HTML, SVG (1)
Valeurs prédéfinies
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
Pourcentages
Ne s'appliquent pas.
Valeur initiale
inline
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété display ne peut pas être animée.
Module W3C
Module CSS - Affichage
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

(1) Seules quelques valeurs de display ont un effet sur une image SVG.

Description de la propriété display.

display définit la façon d'afficher un élément : sous forme d'un bloc, sur la ligne de texte, etc. Chaque élément du HTML a déjà un mode d'affichage par défaut mais la propriété display permet de changer ce mode.

Dans la pratique il est rare de changer la nature d'un élément très spécifique comme un élément de tableau mais display est particulièrement utile dans les cas suivants :

  • Faire disparaître un élément ( display:none )..
  • Déclarer un container flex. Voir le tutoriel sur les flex-box.
  • Déclarer un container grid. Voir le tutoriel sur les grilles.

Cette page étant assez longue, utilisez ces liens pour accéder directement à la valeur de display qui vous intéresse :
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

Valeurs pour display.

  • display: none;

    L'élément ne sera pas affiché du tout. L'emplacement qu'il aurait occupé est disponible pour d'autres éléments.

  • display: inline;

    L'élément s'affiche sur la ligne de texte sans provoquer de retour à la ligne. Les dimensions de l'élément sont définies par son contenu : il n'est possible de changer la largeur ou la hauteur d'un élément inline avec les propriétés CSS width et height.

    Certains éléments HTML s'affichent pas défaut en mode inline : les liens a, les zones de saisie input, les balises span, etc. Les images img sont également des éléments inline (c'est contre-intuitif).

    Voici un
    élément inline
  • display: block;

    L'élément est affiché comme un bloc : il sera précédé et suivi par un retour à la ligne et, sauf indication contraire, il occupera toute la largeur disponible.

    De nombreux éléments HTML s'affiche par défaut en mode block : les paragraphes p, les titres h1, h2, h3..., les cadres div, ainsi que les balises section, article, etc.

    Dans l'exemple ci-dessous, la balise input qui est normalement du type inline a été changé en block : il y a un retour à la ligne avant et un après.

    Votre nom :
  • display: inline-block;

    L'élément se comporte sur la ligne comme un élément inline mais son contenu est géré comme s'il s'agissait d'un bloc : possibilité de définir ses dimensions, ses marges, etc. Voyez l'exemple ci-dessous :

    L'élément ci-contre
    Son contenu est géré comme celui d'un élément du type block
    est du type inline-block
  • display: list-item;

    L'élément est affiché comme un élément de liste, avec une puce ou un numéro. C'est le mode d'affichage par défaut des éléments li.

    Premier item.
    Second item.
    Troisième item.
  • display: flex;

    L'élément se comporte comme un élément du type block et est aussi un container flex pour les éléments qu'il contient. Reportez-vous aux explications détaillées sur la page concernant les flex-box.

    A
    B
    C
  • display: inline-flex;

    L'élément se comporte comme un élément du type inline et est aussi un container flex pour les éléments qu'il contient. Reportez-vous aux explications détaillées sur la page concernant les flex-box.

    Cet élément est sur une ligne  
    A
    B
    C
      tout en étant un container flex.
  • display: grid;

    L'élément se comporte comme un élément du type block et organise les éléments qu'il contient sous forme d'une grille. Reportez-vous aux explications détaillées sur la page concernant les grilles.

    A
    B
    C
    D
  • display: inline-grid;

    L'élément se comporte comme un élément du type inline pour son parent, et est un container grid pour les éléments qu'il contient (disposition sous forme d'une grille). Reportez-vous aux explications détaillées sur le tutoriel sur les grilles.

    Cet élément est sur une ligne  
    A
    B
    C
      tout en étant un container grille
  • display: grid-lanes; ⚠ display: masonry; ⚠

    Ces deux valeurs ont la même signification. La spécification prévoit grid-lanes mais plusieurs navigateurs ont implémenté masonry. Il s'agit d'une grille mais dont les cellules ne sont de dimension fixe que dans une seule direction, définie par grid-template-columns ou grid-template-rows

    Cette fonctionnalité, toute nouvelle, est encore partiellement implémentée (2025). Pour l'activer sur votre navigateurs :

    • Rendez vous à l'adresse about://flags sur un navigateur Webkit, ou à about://config sur Firefox.
    • Cherchez dans la zone de recherche masonry.
    • Positionnez le flag CSS.masonry.layout à enabled.

    ⚠ Sur l'exemple ci-dessous, si toutes les cellules de la grille ont la même dimension, c'est que votre navigateur n'implémente pas encore les grilles masonry.

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

    L'élément se comporte comme un élément du type inline pour son parent, et est un container grid-lanes pour les éléments qu'il contient.

  • display: contents;

    L'élément n'est pas affiché et de plus est retiré du DOM. Autrement dit, ses enfants (les éléments qu'il contient) prennent sa place dans la hiérarchie parent/enfants.

    Pour les besoins de la démonstration, nous avons appliqué au cadre parent ci-dessous un arrière-plan de couleur rouge. Cette couleur n'apparaît pas puisque cet élément a reçu la règle display:contents;.

    A
    B
    C
  • display: table;

    L'élément est affiché comme un tableau. C'est le mode d'affichage par défaut des éléments table.

    En HTML il n'est pas recommandé d'utiliser une balise autre que table pour définir des tableaux. En effet, pour s'afficher correctement, un tableau a besoin d'éléments internes bien précis, comme des lignes tr, des cellules td, etc. Il ne suffit donc pas de changer le mode d'affichage du container.

    Néanmoins, dans cet exemple, nous n'avons utilisé que des balises div. Il a été nécessaire de changer leur mode d'affichage en table pour le container, et en table-row et table-cell pour les éléments internes.

    A
    B
    C
  • display: inline-table;

    L'élément se comporte comme un élément inline et est aussi un container tableau pour les éléments qu'il contient.

    Ceci est un élément qui prend place sur une ligne de texte  
    ABC
    DEF
      et qui se comporte comme un tableau pour les éléments qu'il contient.
  • 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;

    Toutes ces valeurs correspondent à un des constituants d'un tableau.

    table-caption Le titre du tableau. Voir également la propriété CSS caption-side pour positionner le titre par rapport au tableau.
    table-header-group La ou les lignes d'en-tête dans un tableau. C'est le mode d'affichage par défaut des éléments thead.
    table-footer-group La ou les lignes de pied d'un tableau. C'est le mode d'affichage par défaut des éléments tfoot.
    table-row-group La ou les lignes du corps d'un tableau. C'est le mode d'affichage par défaut des éléments tbody.
    table-row Une ligne de tableau. C'est le mode d'affichage par défaut des éléments tr.
    table-column Une colonne de tableau. C'est le mode d'affichage par défaut des éléments col.
    table-column-group Un groupe de colonnes de tableau. C'est le mode d'affichage par défaut des éléments colgroup.
    table-cell Une cellule de tableau. C'est le mode d'affichage par défaut des éléments td.
  • display: ruby;

    L'élément est affiché comme un container ruby. En deux mots, une structure ruby permet d'afficher au dessus de chaque caractères d'une phrase un bref texte d'explication ou une information de phonétique. Cette présentation est très utilisée en écriture japonaise, coréenne, etc. mais on peut lui trouver d'autres usages, comme ci-dessous :

    📧mail   ☎tel   📠fax   📱mobile  

    En HTML il est conseillé d'utiliser la balise ruby, dédiée à la notation ruby, plutôt que de changer le mode d'affichage de balises standards. En effet, la structure ruby a besoin d'éléments internes spécifiques pour s'afficher correctement : les balises rb, rt, etc. Il ne suffit donc pas de changer le mode d'affichage du container.

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

    Chacune de ces valeurs correspond à un des constituants d'une structure ruby.

    ruby-base Mode d'affichage par défaut des balises rb.
    ruby-text Mode d'affichage par défaut des balises rt.
    ruby-base-container Mode d'affichage par défaut des balises rbc.
    ruby-text-container Mode d'affichage par défaut des balises rtc.

    Voici quelques exemples de syntaxe ruby. La syntaxe ruby est normalement employée avec des caractères CJK, mais nous avons préféré construire nos exemples avec des caractères graphiques comme un téléphone.

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

    (1) L'élément rp ne s'affiche pas. Il n'est utile que sur les navigateurs qui ne traitent pas la syntaxe ruby. Il désigne les caractères (souvent des parenthèses) qui serviront à distinguer la partie texte (rt).

  • display: flow;

    La plupart des navigateur assimilent cette valeur à block.

  • display: flow-root;

    La valeur flow-root génère un conteneur bloc qui englobe tout son contenu. Cela permet de résoudre le problème d'une succession d'éléments comportant un élément flottant qui peut se trouver plus grand que le texte.

    Exemple pour 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.
     
    Exemple pour flow-root L'image suivante se décale pour se placer à droite de l'image précédente.
    Exemple pour flow-root Avec display:flow-root ce problème ne pose pas.
    Exemple pour flow-root Cette image est correctement positionnée en dessous de la précédente.
  • display: run-in; ⚠

    L'élément s'insère au début de l'élément qui le suit. Ceci permet par exemple de conserver une balise de titre, pour la sémantique, tout en insérant le titre au début de paragraphe qui suit.

    ⚠ Attention ! Valeur pour l'instant non reconnue par les navigateurs.

    Titre

    Paragraphe suivant.

    Le résultat devrait ressembler à cela (simulation) :

    Titre. Paragraphe suivant.
  • display: initial; (inline) display: inherit; display: revert; display: revertLayer; display: unset;

    Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec display.

Le simulateur applique la valeur choisie aussi bien au conteneur qu'aux quatre éléments internes. Le résultat n'est pas forcément très significatif car certaines valeurs nécessitent une construction particulière du code HTML.

✗ La valeur ms-grid n'est reconnue que par Internet Explorer, navigateur maintenant obsolète

display :
1
2
3
4

Prise en charge et compatibilité des navigateurs.

La propriété display est globalement bien prise en charge par les navigateurs actuels pour ce qui est des valeurs classiques : block, inline, etc. Certaines valeurs, comme contents, run-in, posent encore des problèmes de compatibilité.

Colonne 1
Support général de la propriété display avec la plupart des valeurs courantes.
Colonne 2
Support de la valeur contents pour la propriété display.
Colonne 3
Support de la valeur run-in pour la propriété display.
Colonne 4
Cette valeur établit toujours un nouveau contexte de formatage de bloc pour l'élément. Il fournit une meilleure solution que le piratage clearfix (voir float).

Remarques :

(1) Prise en charge partielle : bugs d’implémentation graves qui rendent le contenu inaccessible pour de nombreux types d’éléments.

(2) Les boutons ne sont plus accessibles lorsque display:contents est appliqué.

1
Propriété
display
2
Valeur
contents
3
Valeur
run-in
4
Valeur
flow-root
Estimation de la prise en charge globale.
96%
12%
1%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse
Caniuse

Historique de la propriété display.

La propriété display existe depuis la toute première version de CSS mais elle a connu pas mal d'évolutions pour s'adapter aux nouvelles fonctionnalités du langage, en particulier les mises en page par flex-box ou grille.

Voir aussi.

Le module de spécification CSS Display Module qui décrit la propriété display est très spécifique. Il ne regroupe que quelques propriétés :

Propriétés :

⚠
reading-flow
Définit dans quel ordre les éléments du conteneur seront lus ou parcourus dans le cas d'un parcours avec la touche tabulation.
⚠
reading-order
Définit la position d'un élément dans l'ordre de tabulation, particulièrement pour les enfants de flex-box ou de grilles.
visibility
Définit si un élément doit être affiché ou masqué.