Ajouter des espaces entre le texte en HTML

Sushant Poudel 19 février 2023
  1. Utilisez la balise <pre> pour insérer des espaces dans le texte en HTML
  2. Utilisez &nbsp; pour insérer des espaces dans le texte en HTML
  3. Utilisez la propriété CSS padding pour insérer des espaces dans le texte en HTML
Ajouter des espaces entre le texte en HTML

Cet article présente quelques méthodes pour insérer des espaces et des tabulations dans le texte en HTML. HTML n’autorise généralement pas plus d’un espace à la fois. Ces méthodes permettent d’ajouter plusieurs espaces.

Utilisez la balise <pre> pour insérer des espaces dans le texte en HTML

La balise <pre> définit un texte préformaté. Il présente le texte exactement tel qu’il est écrit dans le code HTML. L’espace vide à l’intérieur de cette balise s’affiche tel qu’il est écrit. Il est pris en charge dans presque tous les navigateurs Web. Nous pouvons utiliser la balise <pre> pour insérer des espaces dans le texte en utilisant HTML. La balise <pre> prend en charge presque tous les attributs globaux du HTML.

Par exemple, à l’intérieur du corps HTML, ouvrez d’abord la balise <pre>. A l’intérieur de cette balise, tapez le texte de votre choix. Maintenant, ajoutez généralement des espaces vides aléatoires entre les mots de votre phrase dans le texte. (I'm learning HTML used in the example below) . Une fois que vous avez terminé le texte souhaité, fermez la balise <pre>. N’oubliez pas non plus de fermer toutes les balises précédemment ouvertes.

L’exemple ci-dessous illustre une méthode pour ajouter des espaces bancaires dans le texte en HTML. Une fois la balise <pre> ouverte, elle spécifie un texte préformaté. Le texte I'm learning HTML est écrit à l’intérieur de la balise <pre>. Comme on peut le voir, cinq espaces blancs sont utilisés entre les mots learning et HTML. La sortie affiche également cinq espaces vides entre les deux mots, tout comme il a été écrit. On peut mettre autant d’espace que l’on veut. De cette façon, nous pouvons ajouter des espaces vides dans le texte en HTML.

Exemple de code :

<pre> I'm learning HTML</pre>

Utilisez &nbsp; pour insérer des espaces dans le texte en HTML

Nous pouvons utiliser le &nbsp; balise pour ajouter un espace vide dans le texte d’un code HTML. L’entité NBSP signifie espace incassable. Un espace insécable interprète qu’il s’agit d’un espace qui ne se brisera pas en une nouvelle ligne. Deux mots séparés par un espace insécable seront sur la même ligne plutôt que sur des lignes différentes. Il est avantageux d’empêcher les navigateurs de tronquer les espaces dans les pages HTML.

Par exemple, à l’intérieur du corps HTML, saisissez le texte de votre choix. À l’endroit où vous souhaitez ajouter l’espace vide, tapez &nbsp;. Vous devez taper le même nombre de &nbsp; comme l’espace vide que vous voulez. Écrivez cinq occurrences de &nbsp; et continuez à taper le reste du texte. Une fois celui-ci terminé, fermez toutes les balises précédemment ouvertes.

L’exemple ci-dessous illustre une autre méthode pour ajouter des espaces vides dans votre texte dans un code HTML. Après le mot learning, l’entité &nbsp; est commandé cinq fois par la suite. Cela implique qu’il y a cinq espaces blancs entre les mots learning et HTML. Si vous tapez 5 espaces dans votre texte dans le code, le navigateur supprimera quatre espaces vides, mais &nbsp permet d’ajouter autant d’espaces que vous le souhaitez. C’est donc une autre façon d’ajouter des espaces vides dans un code HTML.

Exemple de code :

<body>
I'm learning&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML 
</body>

Utilisez la propriété CSS padding pour insérer des espaces dans le texte en HTML

On peut aussi utiliser la propriété CSS padding pour ajouter des espaces vides dans le texte en HTML. Nous pouvons utiliser la propriété padding avec la balise <span> pour obtenir l’espace vide. La balise <span> est appelée un conteneur en ligne car elle ne commence pas dans une nouvelle ligne. Il est utilisé pour baliser un texte ou un document. Il ne représente rien par nature car il n’apporte aucun changement visuel seul. Il est utilisé à des fins de style et est également pris en charge par tous les navigateurs Web. Il prend également en charge tous les attributs Global et Event en HTML. Nous pouvons utiliser la propriété padding-left dans un élément <span> pour ajouter des espaces.

Par exemple, à l’intérieur du corps HTML, saisissez le texte de votre choix. À l’endroit où vous souhaitez ajouter l’espace vide, créez un élément <span> et appliquez-y le style. Définissez la propriété padding-left sur 30px. Après cela, fermez la balise <span>. Écrivez le texte restant et fermez toutes les balises précédemment ouvertes dans le code.

Nous avons créé un élément <span> après le mot learning dans l’exemple ci-dessous. Nous avons appliqué le rembourrage gauche de 30px dans l’élément. Cela signifie que nous avons créé un espace de 30px après le mot learning, puis le reste du mot a continué. Ainsi, nous avons ajouté des espaces dans le texte en utilisant CSS et HTML.

Exemple de code :

<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn