Quelle est la signification principale de la…

La propriété display détermine comment un élément sera affiché dans le document et comment il interagira avec d'autres éléments, en participant au flux de mise en page (layout flow). Elle définit le type de bloc de formatage de l'élément.

Principales valeurs :

block : L'élément est formaté en tant que bloc. Il occupe toute la largeur disponible, commence sur une nouvelle ligne, et peut avoir des dimensions définies (width, height).
inline : L'élément est formaté en ligne. Il ne commence pas une nouvelle ligne, n'occupe que la largeur nécessaire, et ne peut pas avoir de dimensions définies (width, height), ni de marges verticales (margin-top, margin-bottom) ou de padding interne (padding-top, padding-bottom) qui affectent les éléments environnants.
inline-block : L'élément est formaté en ligne, mais se comporte comme un bloc à l'intérieur de la ligne. Il ne commence pas une nouvelle ligne, peut avoir des dimensions définies (width, height), ainsi que des marges verticales et du padding interne affectant les éléments environnants.
none : L'élément et son contenu ne sont pas affichés. L'élément est complètement supprimé du flux du document, ne prenant pas de place.
flex : L'élément devient un conteneur Flex, et ses descendants directs deviennent des éléments Flex. Utilisé pour créer des mises en page flexibles.
grid : L'élément devient un conteneur Grid. Utilisé pour créer des mises en page basées sur une grille.

Fonctionnement :

Le navigateur utilise la valeur display pour déterminer le type de contexte de formatage dans lequel se trouve l'élément. Cela influence :

Le flux du document : Comment l'élément est positionné par rapport à ses voisins.
Les dimensions de l'élément : La possibilité de définir la largeur et la hauteur, et l'influence du contenu sur ces dimensions.
L'influence sur les éléments environnants : Comment les marges et dimensions de l'élément affectent la disposition des autres éléments.

Exemple :

/* Élément avec display: block */
div {
  display: block;
  width: 100%; /* Occupe toute la largeur */
  margin-bottom: 10px; /* Crée une marge verticale */
}

/* Élément avec display: inline */
span {
  display: inline;
  /* width et height sont ignorés */
  /* margin-top et margin-bottom sont ignorés */
}

/* Élément avec display: inline-block */
img {
  display: inline-block;
  width: 100px; /* La largeur peut être définie */
  height: 100px; /* La hauteur peut être définie */
  margin: 5px; /* Crée des marges de tous les côtés */
}

/* Élément caché */
.hidden {
  display: none;
}

Quelle est la signification principale de la propriété display en CSS et comment fonctionne-t-elle?