Comment insérer des espaces en HTML

Dans le développement front-end, vous devez parfois ajouter des espaces à la page, alors comment les ajouter ? Cet article vous présentera la méthode d'insertion d'espaces dans les pages HTML. J'espère qu'il vous sera utile. [Tutoriels vidéo associés recommandés : Tutoriel HTML]

1. Tapez des espaces

dans la page html, nous pouvons. Insérez des espaces en tapant la touche "espace".

Exemple : Tapez un espace dans p.p1 et tapez 5 espaces dans p.p2. Remarque : Il s'agit de l'état de demi-largeur lorsque vous tapez "espace"

<p class="p1">测试文字| php中文网！</p>
<p class="p2">测试文字|     php中文网！</p>

Image d'effet :

On peut voir que peu importe si nous tapez 1 dans les espaces HTML, 5 espaces ou plusieurs espaces, le navigateur Web réduira automatiquement ces espaces en un seul espace.

Alors, comment afficher plusieurs espaces saisis ? Vous pouvez taper la touche « espace » en pleine largeur, par exemple :

<p class="p1">测试文字|　php中文网！</p>
<p class="p2">测试文字|　　　　　　php中文网！</p>

Image d'effet :

Remarque : Pleine largeur les espaces seront interprétés comme des caractères chinois. Il est affiché sous forme de caractères chinois vides et est affiché comme un nombre réel (autant qu'il y en a).

Ou utilisez la balise

 pour résoudre ce problème (tapez "espace" en demi-largeur), par exemple : </p><pre class='brush:php;toolbar:false;'><p class="p1">
    <pre class="brush:php;toolbar:false">测试文字| php中文网！

测试文字|     php中文网！

Rendu :

2. Utilisez le caractère espace du HTML

Nous pouvons utiliser les entités de caractères représentant les espaces en HTML pour insérer des espaces dans la page HTML. Jetons un coup d'œil aux entités de caractères représentant. espaces en html. Qui :

Caractères : un espace vide continu La largeur de cet espace est affectée par la police.

 Caractère : saisissez la moitié d'une touche "espace" (la moitié de la largeur d'un caractère chinois) en mode pleine largeur.

 Caractères : saisissez la touche "espace" en pleine largeur (largeur de 1 caractère chinois).

Regardons l'effet :

<p class="p1">测试文字|  字符nbsp显示空格！</p><br /
<p class="p2">测试文字|&ensp;字符ensp显示空格！</p><br />
<p class="p3">测试文字|&emsp;字符emnsp显示空格！</p>

Rendu :

Instructions :   La largeur occupée par les caractères n'est fondamentalement pas affectée par la police et est assez robuste.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!