Avant même de parler de couleurs ou de polices, chaque élément d'une page a besoin d'un statut : occupe-t-il toute la largeur disponible, ou se glisse-t-il simplement au milieu du texte qui l'entoure ? C'est display qui tranche cette question, et c'est souvent la toute première propriété qu'on modifie face à un élément qui ne se comporte pas comme prévu.
Un bouton personnalisé fabriqué avec un <span>, une image qui refuse de prendre une largeur fixe, une <div> qui reste collée à ses voisines : la plupart de ces surprises se résolvent en changeant une seule valeur de display.
Définition
display détermine le type de boîte que le navigateur génère pour un élément, et donc la façon dont il se positionne par rapport à ses voisins. Deux familles de valeurs existent : les valeurs simples, qui gèrent un seul élément (block, inline, inline-block, none), et les valeurs qui ouvrent un système de disposition entier pour ses enfants, comme flex ou grid.
Les quatre valeurs de base
Le choix entre ces valeurs change trois choses : si l'élément saute une ligne, si sa largeur et sa hauteur sont respectées, et si ses marges verticales comptent.
| Valeur | Saut de ligne | width / height | margin vertical |
|---|---|---|---|
block | Avant et après | Respectées | Respecté |
inline | Aucun, coule dans le texte | Ignorées | Ignoré |
inline-block | Aucun, coule dans le texte | Respectées | Respecté |
none | L'élément disparaît | Sans objet | Sans objet |
Par défaut, une balise comme <div>, <p> ou <h1> est en block : elle empile ses voisines verticalement. Une balise comme <span>, <a> ou <strong> est en inline : elle coule dans la phrase, sans jamais forcer de retour à la ligne. none va plus loin qu'une simple mise en pause : l'élément ne réserve plus aucune place, comme s'il n'existait pas dans le Modèle de boîte.
Exemple concret : pourquoi une largeur reste sans effet
Ce piège revient souvent sur un élément qu'on essaie de transformer en bouton ou en carte.
.etiquette {
display: inline;
width: 200px;
padding: 12px 20px;
background-color: #f97316;
}Sur un <span class="etiquette">, cette règle est en grande partie ignorée : la largeur de 200 pixels n'existe tout simplement pas pour un élément inline, qui ne prend que la largeur de son texte. Le correctif tient en une ligne.
.etiquette {
display: inline-block;
width: 200px;
padding: 12px 20px;
background-color: #f97316;
}inline-block garde le comportement d'un élément qui coule dans le texte (il ne force pas de retour à la ligne), tout en respectant enfin la largeur, la hauteur et les marges verticales, exactement comme un block. Notre formation HTML et CSS revient sur ce panachage entre inline et block dès les premiers exercices de mise en page, pour que ce genre de piège ne surprenne plus une fois en projet.
Le piège classique : un lien ou un span stylé comme un bouton
Un <a> ou un <span> transformé en bouton avec juste des couleurs et du padding garde souvent son display: inline par défaut : le padding vertical s'affiche visuellement mais chevauche les lignes voisines, et la zone réellement cliquable ne correspond pas à ce qu'on voit à l'écran. Passez-le en inline-block ou en block avant d'ajuster quoi que ce soit d'autre.
display et les systèmes de disposition modernes
Les valeurs flex et grid font partie de la même propriété, mais elles changent de catégorie : elles ouvrent Flexbox et CSS Grid, deux systèmes complets de disposition. display agit alors sur deux niveaux à la fois : de l'extérieur, l'élément se comporte à peu près comme un bloc ; à l'intérieur, ses enfants directs suivent désormais les règles du flux flexible ou de la grille, et non plus le flux normal du document.
Questions fréquentes
Quelle différence entre display: none et visibility ?
display: none retire complètement l'élément de la mise en page : aucune place n'est réservée, et les éléments voisins se déplacent pour combler le vide. visibility: hidden rend l'élément invisible mais garde sa place intacte, comme un emplacement vide dans la page.
Pourquoi mon élément en display: inline ignore-t-il ma largeur ?
Par spécification, un élément inline ne calcule pas de boîte indépendante : sa largeur correspond exactement à celle de son contenu, ligne par ligne, et ne peut pas être forcée par width. C'est un choix volontaire, pensé pour du texte qui doit s'adapter à la ligne qui l'entoure.
display: flex change-t-il l'élément lui-même ou seulement ses enfants ?
Les deux, mais pas de la même façon. Vu de l'extérieur, l'élément se comporte globalement comme un bloc. À l'intérieur, ce sont ses enfants directs qui changent de comportement : ils deviennent des éléments flexibles. Les petits-enfants, eux, ne sont pas concernés tant qu'ils n'ont pas leur propre display: flex.