HTML / Insérer plusieurs espaces avec NBSP et white-space

Pour afficher plusieurs espaces en HTML, utilisez   pour une courte séquence ou CSS white-space: pre-wrap pour préserver les espaces et les sauts de ligne dans le texte. Choisissez avec soin :   empêche aussi le retour à la ligne ordinaire à cet endroit. Pour l'espacement entre les boutons ou les éléments de navigation, utilisez CSS gap ou margin.

Pourquoi plusieurs espaces semblent n’en former qu’un

Avec le réglage habituel white-space: normal, les espaces ordinaires consécutifs et les tabulations entre les mots sont regroupés pour l'affichage. L'indentation et les retours à la ligne dans le code source HTML ne définissent pas directement l'espacement visuel. Un retour à la ligne dans le code source ne se transforme pas toujours en un espace visible : son traitement peut dépendre de la langue et du contexte.

Collez cet exemple complet dans un éditeur de texte, enregistrez-le sous spaces.html en utilisant UTF-8, puis ouvrez le fichier dans un navigateur. Aucune bibliothèque ni serveur n'est requis. Après modification, enregistrez et actualisez le navigateur. Les mots d'exemple utilisent les lettres latines afin que les différences soient faciles à comparer.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les espaces en HTML</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>Comparer les espaces en HTML</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

Dans le paragraphe normal, la source contient trois espaces puis sept espaces entre Alpha, Beta et Gamma, mais chaque séquence apparaît normalement comme un seul espace. Sélectionnez le paragraphe dans les outils de développement et inspectez sa valeur white-space calculée. Cela distingue les caractères dans la source de le regroupement des espaces lors du rendu.

Insérer des espaces insécables

  est une référence de caractère HTML pour un espace insécable, U+00A0. L'écrire trois fois insère trois caractères qui ne sont pas regroupés comme les espaces ordinaires consécutifs. Cela peut également garder un nombre et son unité ensemble.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

Le premier paragraphe place trois espaces insécables entre Alpha et Beta. Dans le deuxième paragraphe, 10 kg empêche un passage à la ligne ordinaire entre le nombre et l'unité. La largeur réelle dépend de la police et de la taille de la police ; trois espaces n'ont pas une largeur fixe en pixels.

Relier une phrase entière avec de nombreux espaces insécables réduit les possibilités de retour à la ligne et peut provoquer un débordement sur un écran étroit. Le texte copié contient également un caractère différent d'un espace ordinaire, U+0020, ce qui peut affecter les recherches et les comparaisons de chaînes. Évitez de répéter ces caractères pour aligner le contenu ou créer une indentation.

Conserver les espaces et les sauts de ligne avec white-space

Lorsque les espaces répétés et les sauts de ligne explicites sont des parties significatives du texte, appliquez white-space: pre-wrap à cet élément. Il préserve les deux tout en permettant un retour à la ligne supplémentaire pour s'adapter à la largeur disponible. Cela ne garantit pas qu'une URL longue ou un mot non interrompu tiendra dans la boîte.

Dans l'exemple complet, à la fois pre-wrap et pre conservent les trois espaces entre Alpha et Beta et le saut de ligne avant Gamma. Rétrécissez la fenêtre : pre-wrap permet un retour à la ligne supplémentaire, tandis que pre ne le fait pas. L'exemple utilise overflow-x: auto pour permettre le défilement horizontal dans le second cas. Avec pre-line, les sauts de ligne explicites restent, mais les espaces consécutifs entre les mots sont regroupés.

Ce tableau résume les différences courantes dans le traitement du texte. Cela n’implique pas que des détails tels que la largeur des tabulations ou les espaces en fin de ligne se comportent de manière identique. Vérifiez également les valeurs héritées et d’autres règles CSS. Définition de white-space selon le W3C

Régler l’espacement entre les éléments avec CSS

Pour séparer deux boutons, faites de leur parent un conteneur flex et utilisez gap au lieu d'ajouter des espaces de texte. Utilisez margin pour l'espacement en dehors d'un élément et padding entre sa bordure et son contenu. Les caractères d'espacement appartiennent au contenu ; l'espacement CSS contrôle la disposition.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Dans l'exemple complet, les boutons A et B sont séparés par gap: 1rem. Un rem est basé sur la taille de la police de l'élément racine, donc il n'est pas toujours de 16 pixels. S'il y a une largeur insuffisante, flex-wrap: wrap permet à un bouton de passer à la ligne suivante. En gardant tout le reste inchangé, définissez seulement gap sur 0, comparez le résultat, puis rétablissez 1rem.

Vérifications si le résultat diffère

1. Si le texte littéral   apparaît, vérifiez que vous éditez du HTML. Le coller comme texte dans un éditeur visuel, ou l’échapper deux fois comme  , empêche qu’il devienne un espace.
2. Si les espaces ou les sauts de ligne disparaissent, inspectez la valeur calculée white-space du paragraphe et confirmez que le sélecteur CSS correspond. L’indentation dans le code source à l’intérieur d’un élément pre-wrap peut aussi devenir visible, donc supprimez les espaces involontaires.
3. Si le contenu déborde sur mobile, rétrécissez la fenêtre et recherchez des espaces insécables répétés ou un paramètre pre. Selon l’objectif, remplacez-les par des espaces ordinaires ou utilisez pre-wrap. Vérifiez de nouveau à une largeur plus grande après avoir effectué le changement.

Pour afficher l’écriture   dans une explication plutôt que d'insérer un espace, écrivez   dans le code source HTML. La norme répertorie les références de caractères et leurs caractères correspondants. Liste des références de caractères HTML du WHATWG