Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Cet article nécessite une relecture technique. Voici comment vous pouvez aider.

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 utilisées par display sont définies via la spécification HTML ou via la feuille de style par défaut du navigateur ou de l'utilisateur. En XML, la valeur par défaut est inline.

En plus de gérer différents types d'affichage, display peut prendre la valeur none qui permet de ne pas afficher un élément. Lorsqu'on utilise none, tous les éléments « fils » sont également masqué. Le document est affiché de la même façon que si l'élément n'existait pas au sein de l'arbre du document.

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

display: none;

display: inline;
display: block;
display: inline-block;

display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;

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

Valeurs

display-value

Un mot-clé qui définit le type de rendu appliqué à l'élément. Voici les différentes valeurs possibles et leurs significations respectives :
Ensemble de valeurs Valeur Description
Valeurs de base (CSS 1) none

L'élément, ainsi que tous ses descendants, ne sont plus affichés. Le document est affiché comme si l'élément n'existait pas.

Pour rendre compte des dimensions d'une boîte d'un élément sans que son contenu soit visible, on pourra utiliser la propriété visibility.
inline L'élément génère une ou plusieurs boîtes en ligne (inline).
block L'élément génère une boîte en bloc (block).
list-item L'élément génère un boîte en bloc pour le contenu et une boîte séparée pour un élément de liste en ligne.
Valeurs étendues (CSS 2.1) inline-block L'élément génère une boîte d'élément en bloc qui s'inscrira dans le contenu environnant comme si elle était une simple boîte en ligne (se comportant comme un élément remplacé).
Valeurs liées au modèle de tableau (CSS 2.1) inline-table La valeur inline-table n'a pas de correspondance directe en HTML. Elle se comporte comme un élément HTML <table> mais sous la forme d'une boîte en ligne plutôt qu'une boîte en bloc. L'intérieur de la boîte du tableau est géré comme un contexte de bloc.
table Ces éléments se comportent comme des éléments HTML <table>. Elle définit une boîte de bloc.
table-caption Ces éléments se comportent comme les éléments HTML <caption>.
table-cell Ces éléments se comportent comme les éléments HTML <td>.
table-column Ces éléments se comportent comme les éléments HTML <col>.
table-column-group Ces éléments se comportent comme les éléments HTML <colgroup>.
table-footer-group Ces éléments se comportent comme les éléments HTML <tfoot>.
table-header-group Ces éléments se comportent comme les éléments HTML <thead>
table-row Ces éléments se comportent comme les éléments HTML <tr>
table-row-group Ces éléments se comportent comme les éléments HTML <tbody>
Valeurs de liste (CSS3) inline-list-item TODO
Valeurs liées au modèle de boîtes flexibles (flexbox) (CSS3) flex Cet élément se comporte comme un élément en bloc et dispose son contenu selon le modèle des boîtes flexibles.
inline-flex Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle des boîtes flexibles.
Valeurs liées au modèle de grille (CSS3) grid

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

Cette valeur est expérimentale, la plupart des navigateurs ne la prennent pas en charge (cf. le tableau de compatibilité en bas de page). Attention, notamment à la version -moz-grid qui n'est pas une valeur préfixée équivalente mais qui est utilisée avec le modèle de disposition XUL qui ne doit pas être utilisé sur un site web.
inline-grid Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de grille.
Valeurs liées à la mise en forme Ruby (CSS3) ruby Cet élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Elle se comporte comme les éléments HTML <ruby>.
ruby-base Ces éléments se comportent comme les éléments HTML <rb>
ruby-text Ces éléments se comportent comme les éléments HTML <rt>
ruby-base-container Ces éléments se comportent comme des éléments <rbc> générés comme des boîtes anonymes.
ruby-text-container Ces éléments se comportent comme les éléments HTML <rtc>
Valeurs expérimentales run-in
  • Si la boîte run-in contient une boîte en bloc, la valeur a le même effet que block.
  • Si une boîte en bloc suit la boîte run-in, la boîte run-in devient la première boîte en ligne de la boîte en bloc.
  • Si une boîte en ligne suite la boîte run-in, la boîte run-in devient une boîte en bloc.
contents Ces éléments ne produisent pas de boîtes en tant que tels, ils sont remplacés par leurs pseudo-boîtes et les boîtes filles.
Valeurs non-standards -moz-box / -webkit-box L'élément se comporte comme une boîte flexible au sens de l'ancienne spécification sur les boîtes flexibles (version de la spécification qui n'est plus à jour).
-moz-inline-box / -webkit-inline-box L'élément se comporte comme une boîte flexible en ligne (inline) au sens de l'ancienne spécification sur les boîtes flexibles (qui n'est plus à jour).
-webkit-flex Synonyme de flex.  
-webkit-inline-flex Synonyme de inline-flex.  

Syntaxe formelle

none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

Exemples

CSS

.cache {
  display: none;
}

.exemple-inline {
  display: inline;
}

.exemple-bloc {
  display: block;
}

HTML

<p class="cache"> Vous ne me verrez pas !</p>

<p class="exemple-inline">toto</p><p class="exemple-inline">titi</p>

<p class="exemple-bloc">tutu</p><p class="exemple-bloc">tyty</p>

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 des valeurs inline-et 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 liées au modèle de grille.
CSS Flexible Box Layout Module
La définition de 'display' dans cette spécification.		 Candidat au statut de recommandation Ajout des valeurs liées au modèle de boîtes flexibles.
CSS Level 2 (Revision 1)
La définition de 'display' dans cette spécification.		 Recommendation Ajout des valeurs liées au modèle de tableau et de inline-block.
CSS Level 1
La définition de 'display' dans cette spécification.		 Recommendation Définition initiale. Valeurs simples : none, block, inline, et list-item.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline and block 1.0 1.0 (1.7 ou moins) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5[4] 7.0 1.0 (85)
list-item 1.0 1.0 (1.7 ou moins) 6.0 7.0 1.0 (85)
inline-list-item Pas de support Pas de support[6] Pas de support Pas de support Pas de support
run-in 1.0 [5] Pas de support 8.0 7.0 1.0 (85)[5]
4.0 Removed in 32 5.0 (532.5) Removed in 8.0
inline-table 1.0 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, and table-caption 1.0 1.0 (1.7 ou moins) 8.0 7.0 1.0 (85)
flex 21.0-webkit 18.0 (18.0)[1]
20.0 (20.0)		 11 12.50 6.1-webkit
inline-flex 21.0-webkit 18.0 (18.0)[1]
20.0 (20.0)		 11 12.50 6.1-webkit
grid ? Pas de support 10.0-ms ? ?
inline-grid ? Pas de support 10.0-ms ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? 34.0 (34.0)[3] ? ? ?
contents 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) ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 4.4 ? ? ? 7.0-webkit

[1] Pour les versions 18 et 19 de Firefox, il fallait activer la préférence layout.css.flexbox.enabled dans about:config afin de gérer les boîtes flexibles (flexbox). Les boîtes flexibles sur plusieurs lignées sont gérées depuis Firefox 28.

[2] Pour Firefox 36, la préférence permettant d'activer cette fonctionnalité était désactivée par défaut.

[3] La gestion de CSS Ruby est active lorsque la préférence layout.css.ruby.enabled est activée (ce qui n'est pas le cas par défaut).

[4] Uniquement pour les éléments en ligne (inline) naturels

[5] Pas avant les éléments en ligne (inline)

[6] Voir bug 1105868

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : friendofweb, ThibautMln, jean-pierre.gay, SphinxKnight, renoirb, Sebastianz, teoli, Golmote, FredB, Mgjbot, BenoitL, Fredchat, Kyodev
 Dernière mise à jour par : friendofweb,