CSS : display - Web Formation

Description

La propriété display permet de définir la manière dont un élément HTML est affiché dans la page. Elle contrôle si l’élément occupe toute la largeur, s’il peut être dimensionné, s’il se place à côté des autres ou s’il crée un nouveau conteneur de mise en page (flex, grid…).

C’est l’une des propriétés les plus importantes en CSS car elle influence la structure, la disposition et le comportement des éléments.

Le type d’affichage modifie complètement le comportement d’affichage d’un élément.

Par exemple, un élément en inline ne peut pas être redimensionné en largeur ou hauteur, alors qu’un élément en block oui.

Valeurs principales

Voici les valeurs les plus courantes de la propriété display :

Valeur	Exemple	Description
`block`	`display: block;`	L’élément prend toute la largeur disponible et commence sur une nouvelle ligne. Exemple : `<div>`, `<p>`.
`inline`	`display: inline;`	L’élément ne commence pas sur une nouvelle ligne et ne peut pas être dimensionné en largeur/hauteur. Exemple : `<span>`, `<a>`.
`inline-block`	`display: inline-block;`	Se comporte comme un inline mais peut être dimensionné. Très pratique pour les boutons.
`flex`	`display: flex;`	Transforme l’élément en conteneur flexible (Flexbox), pour organiser les éléments enfants horizontalement ou verticalement.
`grid`	`display: grid;`	Transforme l’élément en grille (CSS Grid), utile pour des mises en page complexes.
`none`	`display: none;`	Masque complètement l’élément : il ne prend plus de place dans la page.

Exemple

<div class="block">Bloc (display block)</div>
<div class="inline">En ligne (display inline)</div>

<div class="block">Bloc (display block)</div><div class="inline">En ligne (display inline)</div>

.block {
    display: block;
    background-color: lightgrey;
    padding: 10px;
}

.inline {
    display: inline;
    background-color: #f0f0f0;
    padding: 5px;
}

.block {    display: block;    background-color: lightgrey;    padding: 10px;}.inline {    display: inline;    background-color: #f0f0f0;    padding: 5px;}

Aperçu du résultat

Bloc (display block)

En ligne(display inline)

Remarques

Les éléments inline <span> ne peuvent pas être redimensionnés sans passer en inline-block ou block.
display: none supprime complètement l’élément du flux ; contrairement à visibility: hidden qui laisse la place vide.
Les valeurs flex et grid permettent de créer des mises en page modernes et responsives.