Ajouter des espaces en HTML
Tapez cinq espaces entre deux mots en HTML et le navigateur n'en affiche qu'une. Toute suite d'espaces, de tabulations et de sauts de ligne est réduite à une seule espace. Pour ajouter des espaces supplémentaires, utilisez l'entité d'espace insécable , une fois par espace :
convient pour quelques espaces dans une ligne de texte. Pour des écarts plus grands, ou de l'espace entre des éléments, utilisez le CSS, présenté plus bas.
Le rôle de
est l'espace insécable (caractère U+00A0). Elle a deux effets :
- Elle n'est jamais réduite, donc trois d'entre elles font trois espaces.
- La ligne ne se coupe jamais à son niveau, donc les mots de chaque côté restent ensemble.
Le second effet est son vrai rôle. Les nombres et leurs unités, les initiales et les expressions courtes qui paraissent bizarres coupées sur deux lignes sont reliés par :
Dans la boîte grise, « 10 » et « km » tombent sur des lignes différentes. Dans la verte, ils ne peuvent pas être séparés. Pour garder ensemble un passage plus long, white-space: nowrap sur un span est plus simple qu'enchaîner des entités ; voir la page retour à la ligne.
Des entités d'espace de largeurs différentes
HTML a des caractères nommés pour des espaces plus larges ou plus étroites. Elles ne sont pas réduites non plus, ce qui les rend pratiques pour un espacement fin dans le texte :
| Entité | Nom | Largeur |
|---|---|---|
| Espace insécable | Comme une espace normale |
  | Demi cadratin | Un demi em |
  | Cadratin | Un em (la taille de police) |
  | Espace fine | Une fraction d'em, selon la police |
  | Espace fine insécable | Fine, et sans retour à la ligne |
Le surlignage bleu montre la largeur de chaque espace. Seules et   empêchent aussi les retours à la ligne.
Conserver chaque espace : pre et white-space
Quand l'espacement fait partie du contenu (code, art ASCII, colonnes alignées, poésie), conservez tous les blancs au lieu d'ajouter des entités. L'élément <pre> le fait par défaut, et la propriété CSS white-space le fait pour n'importe quel élément :
Valeur de white-space | Espaces | Sauts de ligne | Coupe les lignes longues |
|---|---|---|---|
normal (par défaut) | Réduites | Deviennent des espaces | Oui |
nowrap | Réduites | Deviennent des espaces | Non |
pre | Conservées | Conservés | Non |
pre-wrap | Conservées | Conservés | Oui |
pre-line | Réduites | Conservés | Oui |
pre-wrap est généralement celle qu'il vous faut pour un texte utilisateur : elle conserve l'espacement tout en coupant les lignes sur les écrans étroits. pre garde les lignes telles quelles et fait défiler ou déborder à la place.
Les tabulations sont aussi conservées dans pre. Leur largeur est de 8 espaces par défaut et la propriété tab-size la change (tab-size: 4).
L'espacement avec CSS
La plupart des « il me faut un espace ici » relèvent en fait de la mise en page, et le CSS le fait mieux que les entités, car l'écart reste cohérent et se modifie à un seul endroit :
margin et padding espacent les éléments, gap espace les éléments d'un conteneur flex ou grid, letter-spacing et word-spacing espacent le texte lui-même. Pour mettre un retrait à la première ligne d'un paragraphe, utilisez text-indent, présenté sur la page centrer du texte.
L'écart entre éléments inline
Le revers de la réduction : un blanc entre deux éléments inline ou inline-block compte quand même comme une espace. Un saut de ligne entre deux boutons dans votre code source crée un petit écart entre eux :
La première paire a un écart dû au saut de ligne du code source. Dans un conteneur flex, les blancs entre les éléments sont ignorés, donc la seconde paire se touche. Utilisez flex et gap quand vous voulez contrôler l'espace exactement.
Erreurs fréquentes
- Des chaînes de
pour la mise en page. Elles cassent dès que la police ou la taille d'écran change. Utilisezmargin,paddingougap. - Taper des espaces en trop en attendant qu'elles s'affichent. Elles sont réduites. Utilisez
ouwhite-space: pre-wrap. - Écrire
 sans le point-virgule. Les navigateurs l'acceptent généralement, mais c'est invalide et cela échoue à certains endroits. Terminez toujours par;. - Mettre des
partout pour empêcher les coupures. Un long passage insécable déborde sur les téléphones. Ne reliez que ce qui doit rester ensemble. - Faire un retrait de paragraphe avec des espaces. Utilisez
text-indenten CSS.
Questions fréquentes
Comment ajouter un espace en HTML ?
Une espace simple fonctionne telle quelle, mais les espaces en trop sont réduites à une seule. Pour en mettre plus, utilisez l'entité d'espace insécable , une par espace : a b. Pour les écarts de mise en page, utilisez plutôt margin, padding ou gap en CSS.
Que signifie en HTML ?
est une espace insécable. Elle ressemble à une espace normale, mais le navigateur ne coupe jamais la ligne à cet endroit et ne la réduit jamais : elle garde ensemble des mots comme 10 km et permet d'ajouter des espaces supplémentaires.
Pourquoi HTML ignore mes espaces ?
HTML réduit les blancs : toute suite d'espaces, de tabulations et de sauts de ligne s'affiche comme une seule espace, et les blancs en début et en fin de ligne sont supprimés. Utilisez , <pre> ou la propriété CSS white-space pour les conserver.
Comment faire une tabulation en HTML ?
HTML n'a pas de tabulation visible en dehors du texte préformaté. Dans <pre> ou un élément avec white-space: pre, un caractère de tabulation est conservé et la propriété CSS tab-size fixe sa largeur. Pour mettre un retrait à un paragraphe, utilisez text-indent ou padding-inline-start en CSS.
Quelle est la différence entre et   ?
est aussi large qu'une espace normale.   fait un demi cadratin et   un cadratin (la largeur de la taille de police).   et   ne sont pas réduites, mais contrairement à , la ligne peut quand même se couper à leur niveau.
