Quelle est la différence entre un bloc en ligne et un élément en ligne?

Un élément en ligne occupe uniquement la largeur nécessaire, ne crée pas de nouvelle ligne et ne permet pas de définir width, height, margin-top, margin-bottom.

Un élément en ligne-bloc se comporte comme un élément en ligne en termes de flux (ne crée pas de nouvelle ligne, s'aligne en ligne), mais comme un élément de bloc en termes de taille et de marges extérieures (il est possible de définir width, height, margin-top, margin-bottom).

Propriété	Élément en ligne	Élément en ligne-bloc
Largeur occupée	Selon le contenu	Selon le contenu ou défini
Nouvelle ligne	Non	Non
width	Ignoré	Appliqué
height	Ignoré	Appliqué
margin-top	Ignoré	Appliqué
margin-bottom	Ignoré	Appliqué
padding-top	Appliqué (n'affecte pas les autres éléments)	Appliqué
padding-bottom	Appliqué (n'affecte pas les autres éléments)	Appliqué

<!-- élément en ligne (par exemple, <span>) -->
<span>Ceci est en ligne</span> <span>Également en ligne</span>

<!-- élément en ligne-bloc -->
<div style="display: inline-block; width: 100px; height: 50px; margin: 10px; background-color: lightblue;">Inline-block</div>
<div style="display: inline-block; width: 100px; height: 50px; margin: 10px; background-color: lightgreen;">Également inline-block</div>