La propriété display définit le type de boîte utilisée pour le rendu d'un élément. En HTML, les valeurs par défaut pour la propriété display sont définies dans les spécifications HTML pour chaque élément ou grâce à la feuille de style par défaut du navigateur ou celle de l'utilisateur. Pour les documents XML, la valeur par défaut est inline, y compris pour les éléments SVG.

En plus de gérer différents types de boîte, la propriété display peut prendre la valeur none qui permet de ne pas afficher un élément. Lorsqu'on utilise none, l'ensemble des éléments qui descendent de l'élément courant sont également masqués. Le document est affiché à l'écran de la même façon que si l'élément n'existait pas dans l'arbre du document.

/* Valeurs de type <display-outside> */
display: block;
display: inline;
display: run-in;

/* Valeurs de type <display-inside> */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* Combinaison de valeurs */
/* <display-outside> et <display-inside> */
display: block flow;
display: inline table;
display: flex run-in;

/* Valeurs de type <display-listitem> */
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;

/* Valeurs de type <display-internal> */
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;

/* Valeurs de type <display-box> */
display: contents;
display: none;

/* Valeurs de type <display-legacy> */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Valeurs globales */
display: inherit;
display: initial;
display: unset;

Valeur initialeinline
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme la valeur spécifiée, excepté pour les éléments positionnés et flottants, ainsi que pour l'élément racine. Dans les deux cas, la valeur calculée peut être un mot clé différent de celui spécifié.
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété display peut être définie grâce à des mots-clés qui sont répartis parmi six catégories :

Valeurs

<display-outside>
Ces mots-clés définissent le type d'affichage extérieur de l'élément, ce qui correspond essentiellement au rôle de l'élément dans le flux de la page :
Valeur Description
block Cet élément génère une boîte de bloc.
inline Cet élément génère une ou plusieurs boîtes en ligne.
run-in L'élément genère une boîte de type run-in. Les éléments run-in agissent comme des éléments en bloc ou comme des éléments en ligne selon les éléments qui les entourent :
  • Si la boîte run-in contient une boîte de bloc, l'élément se comportera comme un élément de bloc
  • Si la boîte run-in précède une boîte de bloc, la boîte run-in devient la première boîte de ligne de la boîte de bloc.
  • Si une boîte en ligne suite la boîte run-in, celle-ci devient une boîte de bloc.
<display-inside>
Ces mots-clés définissent le type d'affichage intérieur de l'élément, ce qui définit le contexte de mise en forme dans lequel sera disposé le contenu de l'élément (si ce n'est pas un élément remplacé) :
Valeur Description
flow Le contenu de l'élément est disposé avec le modèle en flux.

Si le type d'affichage extérieur vaut inline ou run-in et que l'élément contribue à un contexte de mise en forme en bloc ou en ligne, l'élément génère une boîte en ligne. Sinon, l'élément génère une boîte conteneur de blocs.

Selon les valeurs d'autres propriétés (telles que position, float ou overflow) et si l'élément contribue à un contexte de mise en forme en bloc ou en ligne, il crée un nouveau contexte de mise en forme en bloc pour son contenu ou il intègre son contenu dans le contexte de mise en forme englobant.

flow-root L'élément génère une boîte de bloc qui crée un nouveau contexte de mise en forme en bloc.
table L'élément se comporte comme un élément <table>. Il définit une boîte de bloc.
flex L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle de boîte flexible.
-webkit-flex Synonyme de flex.
-moz-box / -webkit-box Cet élément se comporte comme une boîte flexible au sens de l'ancienne spécification pour ce modèle.
grid

Cet élément se comporte comme un élément de bloc et dispose son contenu selon le modèle de grille.

subgrid Si la valeur de la propriété display vaut grid pour l'élément parent, cet élément et son contenu sont disposés selon le modèle de grille.
ruby Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de mise en forme ruby. L'élément se comporte à la façon d'un élément <ruby>.
<display-listitem>

L'élément génère une boîte de bloc pour le contenu et une autre boîte séparée en ligne de type « élément de liste ».

Si aucune valeur <display-inside> n'est utilisée, le type d'affichage intérieur pour la boîte principale vaut flow par défaut. Si aucune valeur <display-outside> n'est utilisée, le type d'affichage extérieur pour la boîte principale vaut block par défaut.

<display-internal>

Certains modèles de disposition, tels que table ou ruby, sont structurés de façon complexe, avec différents rôles qui peuvent être attribués aux éléments-fils. Cette section définit les valeurs d'affichage « internes » qui ont uniquement une signification dans ce mode de disposition.

Sauf mention contraire, les mots-clés ci-après définissent à la fois le mode d'affichage interne et externe.

Valeur Description
table-row-group L'élément se comporte comme un élément <tbody>.
table-header-group L'élément se comporte comme un élément <thead>.
table-footer-group L'élément se comporte comme un élément <tfoot>.
table-row L'élément se comporte comme un élément <tr>.
table-cell L'élément se comporte comme un élément <td>.
table-column-group L'élément se comporte comme un élément <colgroup>.
table-column L'élément se comporte comme un élément <col>.
table-caption L'élément se comporte comme un élément <caption>.
ruby-base L'élément se comporte comme un élément <rb>.
ruby-text L'élément se comporte comme un élément <rt>.
ruby-base-container L'élément se comporte comme un élément <rbc>, générés comme des boîtes anonymes.
ruby-text-container These elements behave like <rtc> elements.
<display-box>
Ces valeurs définissent si un élément génère des boîtes à afficher ou non.
Valeur Description
contents

Ces éléments ne produisent pas de boîtes spécifiques en tant que tels. Ils sont remplacés par leurs pseudo-boîtes et les boîtes de leurs éléments fils.
On notera que la spécification CSS Display de niveau 3 définit la façon dont cette valeur doit impacter les éléments inhabituels (qui ne sont pas affichés/rendus via les concepts classiques de boîtes CSS, comme les éléments remplacés, cf. l'annexe B sur ce point pour plus de détails).

Attention, cette valeur retirera l'élément de l'arbre d'accessibilité (les lecteurs d'écran n'analyseront/ne restitueront pas le contenu à l'intérieur).

none

Cette valeur désactive l'affichage d'un élément (il n'aura alors aucun impact sur la disposition). Tous les éléments descendants ne seront pas affichés non plus. Le document est affiché de la même façon que si l'élément n'existait pas.

Pour que les dimensions de la boîte d'un élément soient prises en compte mais sans que le contenu soit affiché, on pourra utiliser la propriété visibility.

<display-legacy>
CSS 2 utilise une syntax avec un seul mot-clé pour la propriété display, il faut alors utiliser des mots-clés différents pour les variantes bloc/en ligne d'un même mode de disposition :
Valeur Description
inline-block

L'élément génère une boîte pour un élément en bloc qui « s'écoule » dans le contenu environnant comme s'il était une boîte en ligne (le comportement obtenu est similaire à celui d'un élément remplacé).

Cette valeur est équivalente à la combinaison inline flow-root.

inline-table

La valeur inline-table n'a pas de correspondance directe en HTML. L'élément se comporte comme un élément HTML <table> mais dans une boîte en ligne plutôt que dans une boîte en bloc. Le contexte de mise en forme à l'intérieur d'une boîte de tableau est un contexte de bloc.

Cette valeur est équivalente à la combinaison inline table.

inline-flex

Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de boîte flexible.

Cette valeur est équivalente à la combinaison inline flex.

inline-grid Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de grille.

Valeurs XUL

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Firefox prend en charge les valeurs suivantes, préfixées par -moz- pour XUL :

Valeur Description
-moz-box Boîte XUL, principalement équivalent à flex
-moz-inline-box Boîte XUL en ligne, principalement équivalent à inline-flex
-moz-grid Grille XUL
-moz-inline-grid Grille XUL en ligne
-moz-grid-group Groupe de grille XUL
-moz-grid-line Ligne de grille XUL
-moz-stack Pile XUL
-moz-inline-stack Pile XUL en ligne
-moz-deck Deck XUL
-moz-popup Popup XUL

Toutes les valeurs d'affichage XUL, sauf -moz-box et -moz-inline-box, ont été retirées avec bug 1288572. Voir ce billet du site de compatibilité Firefox pour plus d'informations.

Les valeurs -moz-box et -moz-inline-box seront retirées ultérieurement avec bug 879275.

Syntaxe formelle

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>


<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | 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

Exemples

HTML

<p>
  Texte visible
</p>
<p class="secret">
  Texte invisible
</p>

CSS

p.secret {
  display: none;
}

Résultat

Accessibilité

display: none;

Utiliser la propriété display avec la valeur none sur un élément entraînera son retrait de l'arbre d'accessibilité. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.

Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser une combinaison de propriétés afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.

Les tableaux

Modifier la valeur de display pour un élément de tableau afin d'utiliser la valeur block, grid ou flex modifiera sa représentation au sein de l'arbre d'accessibilité. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.

Spécifications

Spécification État Commentaires
CSS Display Module Level 3
La définition de 'display' dans cette spécification.
Version de travail Ajout des valeurs run-in, contents, flow, flow-root et des valeurs avec plusieurs mots-clés.
CSS Ruby Layout Module Level 1
La définition de 'display' dans cette spécification.
Version de travail Ajout des valeurs ruby, ruby-base, ruby-text, ruby-base-container et ruby-text-container.
CSS Grid Layout
La définition de 'display' dans cette spécification.
Candidat au statut de recommandation Ajout des valeurs pour le modèle de boîtes en grille.
CSS Flexible Box Layout Module
La définition de 'display' dans cette spécification.
Candidat au statut de recommandation Ajout des valeurs pour le modèle de boîtes flexibles.
CSS Level 2 (Revision 1)
La définition de 'display' dans cette spécification.
Recommendation Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur inline-block.
CSS Level 1
La définition de 'display' dans cette spécification.
Recommendation Définition initiale. Définitions des valeurs basiques : none, block, inline, et list-item.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1121471
list-item1121671
inline-block11216171
inline-table1123871
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group1121871
flex

29

21 -webkit-

12

202

18 —?3

11

84

Oui

9

6.1 -webkit-

inline-flex21 -webkit- 12

202

18 —?3

11

85

Oui6.1 -webkit-
grid57

16

12 -ms-

5210 -ms- 44 ?
inline-grid5712 -ms- 5210 -ms- 44 ?
subgrid ? Non ? Non ? ?
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ?12346 ? ? ?
run-in1 — 327 Non Non87 — 151 — 88
flow-root58 ?53 ?45 ?
contents

65

58 — 659

Non

37

Oui — 5310

Non5211.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui Oui
list-item ? ? ? ? ? ? ?
inline-block ? ? ? ? ? ? ?
inline-table ? ? ? ? ? ? ?
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group ? ? ? ? ? ? ?
flex ? ? ? ? ? ? ?
inline-flex ? ? ? ? ? ? ?
grid5757 ?5244 ?7.0
inline-grid5757 ?5244 ?7.0
subgrid ? ? ? ? ? ? ?
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ? ? ? ? ? ? ?
run-in ? ? ? ? ? ? ?
flow-root5858 ? ?45 ?7.0
contents6565 ?575211.1 Non

1. Until Internet Explorer 8, inline-block is only for natural inline elements.

2. Firefox 28 added multi-line flexbox support.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. Supported as -ms-flexbox.

5. Supported as -ms-inline-flexbox.

6. From version 34: this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. Before Chrome 4, run-in was not supported before inline elements.

8. Before Safari 5, run-in was not supported before inline elements.

9. From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

10. Until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,