Élément en ligne

Placer deux liens ou deux mots en gras l’un à côté de l’autre dans une phrase ne casse jamais la ligne, contrairement à deux paragraphes ou deux titres : cette différence de comportement au sein du flux du texte est justement ce qui distingue cette catégorie d’éléments des blocs.

Exemples et comportement

Les balises <a>, <span>, <strong> ou <em> illustrent ce comportement par défaut :

<p>
  Ce paragraphe contient <strong>un mot important</strong>
  et <a href="/plus">un lien</a> sans retour à la ligne.
</p>

Ce comportement n’est qu’une valeur par défaut définie en CSS, pas une contrainte figée : la propriété display permet de le changer, par exemple en transformant un lien en bloc cliquable pleine largeur avec display: block;.

Pièges fréquents

• Les propriétés width, height, ainsi que les marges verticales, sont ignorées ou partiellement appliquées sur un élément resté en ligne : il faut souvent passer à display: inline-block ou block pour qu’elles prennent pleinement effet.
• Dans l’éditeur de blocs WordPress, certains blocs comme l’image ou le bouton se comportent en ligne par défaut, ce qui explique pourquoi ils peuvent parfois se juxtaposer sans réglage supplémentaire.
• La valeur inline-block combine les deux mondes : l’élément reste dans le flux du texte comme un élément en ligne, tout en acceptant une largeur et une hauteur fixées comme un bloc.
• Un espace blanc présent dans le code source entre deux éléments en ligne adjacents se traduit souvent par un espace visuel réel à l’affichage, une subtilité qui surprend fréquemment lors d’une mise en page fine.