Inline-block CSS

La leçon précédente a cartographié les valeurs quotidiennes de display. Ici vous entraînez l’hybride : inline-block. Vous voulez des voisins sur une ligne quand il y a de la place — comme du texte — tout en gardant une vraie boîte qui respecte width, height et padding. C’est le travail.

Comparaison côte à côte

Choisissez inline-block quand l’élément doit partager une rangée avec ses frères tout en ayant une taille mesurable — chips, étiquettes, libellés d’icône, boutons compacts de barre. Laissez les colonnes pleine page et l’alignement complexe à Flexbox et Grid plus tard.

Un chip dimensionné qui partage encore la ligne

Contrairement à un inline pur, un chip peut garder padding et largeur fixe tout en s’asseyant à côté d’autres chips.

Une barre d’outils simple

Plusieurs contrôles de même largeur peuvent s’asseoir sur une rangée. Séparez-les avec margin. Cela suffit pour une barre calme avant l’arrivée de Flexbox.

Alignement vertical dans la ligne

Les boîtes de niveau inline peuvent avoir des hauteurs différentes à côté du texte ou d’images. vertical-align les décale — middle est un choix calme courant pour les paires icône+libellé.

Le piège de l’écart d’espaces blancs

Les navigateurs traitent espaces et retours à la ligne entre balises comme des nœuds texte. Entre deux frères inline-block, ce petit espace devient un écart visible. Ce n’est pas le gap Flexbox — c’est du whitespace HTML restant.

Pour calmer l’écart : mettez les balises sur une ligne sans espace, commentez le retour, ou utilisez avec soin une petite marge négative. Plus tard, Flexbox donne un espacement plus propre — ne forcez pas chaque rangée via inline-block pour toujours.

Une habitude calme d’inline-block

Utilisez une classe partagée pour les éléments de rangée. Dimensionnez-les exprès. Corrigez le whitespace seulement quand l’écart gêne. Ne reconstruisez pas des mises en page entières avec des inline-blocks imbriqués — la douleur de l’ère float revient. Position et float ont leurs leçons.

Essayez vous-même

1. Construisez trois .chip en inline-block, largeur fixe et padding — regardez-les partager une ligne.
2. Faites une barre .tool de quatre boutons à largeurs égales avec margin-right.
3. Placez un petit .icon à côté d’un .label et testez vertical-align: middle.
4. Mettez deux frères .tile sur des lignes HTML séparées puis sur une seule — comparez l’écart.
5. Écrivez une phrase : quand inline-block suffit-il, et quand attendre Flexbox ?

Erreurs courantes

• S’attendre à ce qu’un inline pur honore width / height comme une vraie boîte
• Blâmer le CSS pour un « écart mystérieux » qui est en réalité du whitespace HTML entre balises
• Utiliser inline-block pour inventer toute une mise en page multi-colonnes
• Traiter cette leçon comme le survol large de display (block / none) de la précédente
• Sauter ici vers des recettes position ou float au lieu de maîtriser l’hybride

Résumé

• inline-block s’assoit dans une ligne comme du texte mais garde un vrai modèle de boîte pour la taille et le padding
• Idéal pour chips, barres compactes et paires icône+libellé
• vertical-align aide à aligner des voisins de hauteurs différentes
• Le whitespace entre balises peut créer un écart visible — connaissez la cause
• Pour les rangées complexes et les écarts propres, Flexbox vient plus tard ; gardez inline-block intentionnel