Qu'est-ce que inline-block en CSS?

inline-block — c'est une valeur de la propriété display en CSS qui permet aux éléments de se comporter comme des éléments en ligne (occupant uniquement la largeur nécessaire et ne commençant pas sur une nouvelle ligne), tout en ayant la possibilité de définir la largeur, la hauteur, les marges (margin, padding) de n'importe quel côté, comme les éléments de bloc.

Caractéristiques principales :

• Placement en ligne : Les éléments avec display: inline-block sont placés les uns après les autres sur une même ligne, si l'espace le permet.
• Prise en compte des tailles : On peut définir width et height. Le contenu détermine la taille par défaut si non spécifié.
• Marges et bordures complètes : margin, padding et border s'appliquent de tous les côtés (haut, droite, bas, gauche), contrairement aux éléments en ligne (inline), où les marges et bordures verticales n'affectent pas la disposition des éléments voisins.
• Alignement vertical : La propriété vertical-align peut être utilisée pour aligner par rapport aux éléments voisins sur la ligne.

Exemple d'utilisation :

/* Les éléments seront placés en ligne, avec des tailles et marges définies */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Domaine d'application :

• Création de menus de navigation horizontaux.
• Placement de blocs de contenu sous forme de cartes sur une même ligne.
• Combinaison et alignement d'éléments qui doivent être côte à côte, mais avec des tailles spécifiques.

Comparaison avec d'autres valeurs de display :

display	Description	Prise en compte des tailles (width/height)	Prise en compte des marges verticales (margin-top/bottom)	Placement en ligne
block	Commence toujours sur une nouvelle ligne, occupe toute la largeur disponible.	Oui	Oui	Non
inline	Se place en ligne avec le texte, occupe uniquement la largeur nécessaire.	Non	Non (margin-left/right affectent)	Oui
inline-block	Se place en ligne, mais se comporte comme un bloc en tailles et marges.	Oui	Oui	Oui