display - Propriété CSS
Résumé des caractéristiques de la propriété display
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
inline
display
ne peut pas être animée.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 -
grid -
inine -
inline-block -
inline-flex -
inline-grid -
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
Syntaxes 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 CSSwidth
etheight
.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. - 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 nouvelles balises section, article, etc. - 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 se positionne sur la ligne comme un élémentinline
Mais son contenu est géré comme celui d'un élément du typeblock
- 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.
A.B.C. - 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.ABC - 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 ligneABC - 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.
Remarque : utilisez la valeur-ms-grid
pour un fonctionnement correct sur IE.ABCD - display: inline-grid;
L'élément se comporte comme un élément du type
inline
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 ligneABC - 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;
.ABC - 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 entable-row
ettable-cell
pour les éléments internes.ABC - 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 texteA B C D E F - 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é CSScaption-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 :
📧 ☎ 📠 📱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›
☎ ‹ruby› ‹rb›☎‹/rb› ‹rp›(‹/rp›‹rt›Tel‹/rt›‹rp›)‹/rp› ‹/ruby›
(1)☎ (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: 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. La valeur initiale est :
.inline
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
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é.
display
par les navigateurs.
contents
pour la propriété display
.
run-in
pour la propriété display
.
flow-root
pour la propriété display
.
display
contents
run-in
flow-root