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 initiale | inline |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | tous |
Valeur calculée | comme 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'animation | discrète |
Ordre canonique | l'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 queblock
. - Si une boîte en bloc suit la boîte
run-in
, la boîterun-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îterun-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
. - Si la boîte
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