Comprendre inline block en CSS

Comprendre display: inline-block en CSS

inline-block est une valeur de la propriété display qui combine les avantages des éléments en ligne (inline) et ceux des blocs (block).

Un élément avec display: inline-block :

• se place à côté des autres éléments (comme inline)
• peut avoir une largeur, une hauteur, du margin ou du padding (comme block)

---

1. Exemple de base avec inline-block

Les éléments apparaissent sur la même ligne, mais conservent un comportement de bloc (largeur, hauteur, marges).

.boite {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  margin-right: 10px;
}

---

2. Différence entre inline, block et inline-block

Voici les différences essentielles :

.inline {
  display: inline;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

– inline ne permet pas de fixer une largeur/hauteur.
– block prend toute la ligne.
– inline-block garde la mise en ligne mais permet des dimensions fixes.

---

3. Le problème des espaces entre éléments inline-block

Par défaut, un petit espace (espace, retour à la ligne…) est visible entre deux éléments inline-block. Il correspond à l’espace HTML entre les balises.

.box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: gray;
}

💡 Pour supprimer cet espace, tu peux :

• supprimer le retour à la ligne entre les <div>
• mettre les éléments dans une seule ligne HTML
• utiliser une police à taille 0 sur le parent

---

4. Exemple de bouton avec inline-block

Un bouton personnalisé qui peut avoir du padding, une largeur et rester à côté d’autres éléments.

.bouton {
  display: inline-block;
  background: #34495e;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
}

---

Quand utiliser inline-block ?

• Pour créer des blocs alignés horizontalement avec dimensions personnalisées
• Pour styliser des <a> comme des boutons
• Pour construire des grilles légères sans flex ou grid

---

Conclusion

inline-block est une valeur très utile de la propriété display. Elle permet de mixer flexibilité et contrôle sans passer par des systèmes plus complexes. Bien qu’aujourd’hui flex et grid soient préférés pour les mises en page complètes, inline-block reste très pratique dans de nombreux cas simples.