display
Détermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- Valeur initiale
inline- Héritée
- Non
- Animable
- non, il change de façon abrupte
- S’applique à
- tous les éléments
- JavaScript
element.style.display = "flex"
Exemple
#.menu {
display: flex;
gap: 16px;
}
.menu a {
display: inline-block;
padding: 8px 14px;
}<nav class="menu stage">
<a href="#">Cours</a>
<a href="#">Documentation</a>
<a href="#">Collections</a>
</nav>Définition et utilisation
#La propriété display est la base de toute mise en page. Elle indique deux choses : comment l’élément se comporte à l’extérieur (commence-t-il une nouvelle ligne comme un bloc, ou s’écoule-t-il dans le texte comme un élément en ligne) et comment il organise ses enfants (flux normal, Flexbox, Grid).
Les éléments de bloc, comme <div> ou <p>, occupent toute la largeur disponible et commencent sur une nouvelle ligne. Les éléments en ligne, comme <span> ou <a>, s’écoulent dans le texte et ignorent la largeur et la hauteur. inline-block combine les deux mondes : l’élément reste en ligne, mais on peut tout de même lui donner des dimensions.
Les valeurs flex et grid transforment l’élément en conteneur de mise en page moderne, et none retire complètement l’élément de la page, y compris l’espace qu’il occupait.
Syntaxe
#display: block | inline | inline-block | flex | inline-flex | grid | inline-grid | none | contents | …;Valeurs
#- Les éléments s’écoulent en ligne comme du texte. La largeur
110pxest ignorée. - Chaque élément commence une nouvelle ligne et respecte la largeur.
- Les éléments restent sur une seule ligne, mais ont leur propre largeur et des marges verticales.
- Le conteneur organise ses enfants sur une ligne flexible. Ici, la valeur s’applique au parent.
- Le conteneur organise ses enfants dans une grille. Ici, trois colonnes égales.
- L’élément disparaît et ne prend plus de place. Ici, on masque le deuxième élément.
Valeurs en pratique
#inline
110px est ignorée..item { display: inline; }block
.item { display: block; }inline-block
.item { display: inline-block; }flex
.stage { display: flex; gap: 6px; }grid
.stage { display: grid; grid-template-columns: repeat(3, 1fr); }
.item { width: auto; }none
.item:nth-child(2) { display: none; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si
widthoumargin-topne fonctionne pas sur un élément, vérifiez qu’il n’est pas en ligne.inline-blockoublockpeuvent aider. - Pour masquer un élément uniquement visuellement, tout en le gardant accessible aux lecteurs d’écran, n’utilisez pas
display: none.
Entrées associées
#- display vs visibility vs opacitydisplay: none retire l’élément de la mise en page, visibility: hidden le cache mais garde sa place, et opacity: 0 le rend transparent tout en le laissant cliquable.
- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- visibilityMasque un élément, mais laisse l’espace vide qu’il occupait.
- flex-directionDéfinit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- floatDéplace un élément vers le bord gauche ou droit, et le texte le contourne de l’autre côté.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.