Display : block, inline, inline-block

• block : prend toute la largeur et revient à la ligne
• inline : reste dans le texte
• inline-block : reste en ligne mais accepte largeur/hauteur

span.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

Comprendre display evite de nombreux bugs de layout.

Beaucoup de problèmes viennent d'un type d'affichage mal choisi. Avant de "forcer" un comportement, vérifie toujours la valeur de display.

A retenir

display est une propriété fondamentale. Elle détermine la façon dont un élément occupe l'espace avant même Flexbox ou Grid.

Mini pratique

Prends un élément span et passe-le en inline-block. Ajoute largeur, padding et marge pour observer les differences.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.