MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

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-list-item;
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.
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 utilisés 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-list-item Cette valeur transforme l'élément comme un élément d'une liste. De plus, pour l'élément, la valeur outside calculée pour list-style-position sera inside. Dans les autres cas, cette valeur est synonyme de inline.
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.

-webkit-inline-flex Synonyme de inline-flex.
-moz-inline-box / -webkit-inline-box Cet élément se comporte comme une boîte en ligne flexible au sens d'une ancienne spécification du modèle de boîte flexible.
inline-grid Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de grille.

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> = list-item && <display-outside>? && [ flow | flow-root ]?
<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

Spécifications

Spécification État Commentaires
CSS Lists and Counters Module Level 3
La définition de 'display' dans cette spécification.
Version de travail Ajout de la valeur inline-list-item.
CSS Display Module Level 3
La définition de 'display' dans cette spécification.
Version de travail Ajout des valeurs run-in et contents.
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é Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline et block 1.0 (Oui) 1.0 (1.7 ou moins) 4.0 7.0 1.0 (85)
inline-block 1.0 (Oui) 3.0 (1.9) 5.5[4] 7.0 1.0 (85)
list-item 1.0 (Oui) 1.0 (1.7 ou moins) 6.0 7.0 1.0 (85)
inline-list-item Pas de support Pas de support Pas de support[6] Pas de support Pas de support Pas de support
run-in 1.0 [5] (Oui) Pas de support 8.0 7.0 1.0 (85)[5]
Pas de support Pas de support
inline-table 1.0 (Oui) 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row et table-caption 1.0 (Oui) 1.0 (1.7 ou moins) 8.0 7.0 1.0 (85)
flex 21.0-webkit (Oui) 18.0 (18.0)[1]
20.0 (20.0)
11 12.50 6.1-webkit
inline-flex 21.0-webkit (Oui) 18.0 (18.0)[1]
20.0 (20.0)
11 12.50 6.1-webkit
grid 57 (Oui)-ms 45.0 (45.0)[7] 10.0-ms 44 ?
inline-grid 57 (Oui)-ms 45.0 (45.0)[7] 10.0-ms 44 ?
subgrid ? Pas de support ? Pas de support ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? (Oui) 34.0 (34.0)[3] ? ? ?
contents Pas de support Pas de support 37 (37)[2] Pas de support Pas de support Pas de support
-webkit-box (Oui) ? 45.0 (45.0) Pas de support (Oui) ?
-webkit-inline-box (Oui) ? 48.0 (48.0) Pas de support (Oui) ?
-webkit-flex, -webkit-inline-flex (Oui) ? 48.0 (48.0) Pas de support (Oui) ?
flow-root 58 ? 53.0 (53.0) ? 45 ?
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) ? ? (Oui) 7.0-webkit
grid 57 57 ? ? ? 44 ?
inline-grid 57 57 ? ? ? 44 ?
flow-root 58 58 ? ? ? 45 ?

[1] Pour activer la prise en charge des boîtes flexibles, dans Firefox 18 et 19, l'utilisateur devait activer la préférence layout.css.flexbox.enabled. Les boîtes flexibles sur plusieurs lignes sont prises en charge depuis Firefox 28.

[2] Avant Firefox 37, la valeur contents était désactivée par défaut et pouvait être activée grâce à la préférence layout.css.display-contents.enabled (qui valait true à partir de Firefox 37). Elle a depuis été activée par défaut et la préférence a été retirée à partir de Firefox 53.

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

[4] Uniquement pour les éléments qui sont naturellement en ligne.

[5] Ne fonctionne pas avant inline-elements.

[6] Cf. bug 1105868.

[7] La prise en charge de la grille CSS (CSS Grid) n'est pas préfixée pour les canaux Nightly et Alpha et peut être activée via la préférence layout.css.grid.enabled pour les canaux Beta et Release.

[8] Dans Chrome, la valeur contents est actuellement désactivée par défaut mais peut être activée grâce à la préférence « Fonctionnalités expérimentales de la plate-forme web ».

Voir aussi

Étiquettes et contributeurs liés au document

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