# Élément en ligne

> Élément HTML qui s'insère dans le flux du texte sans provoquer de retour à la ligne, occupant uniquement la largeur nécessaire à son contenu.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/element-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.
