Maison > Article > interface Web > Qu’est-ce que les espaces ? L'impact des caractères d'espacement sur la structure HTML
Caractères d'espaces blancs : espaces, tabulations, nouvelles lignes
Remarque : lorsque le navigateur analyse le HTML, il fusionne tous les caractères d'espaces blancs en un seul espace
Une mauvaise structure entraîne des résultats inattendus :
La balise est enveloppée :
<span style="color: #008080">1</span> <span style="color: #008000"><!--</span><span style="color: #008000">文本域结束标签 换行导致placeholder无法正确表示</span><span style="color: #008000">--></span><span style="color: #008080">2</span> <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="5"</span><span style="color: #ff0000"> cols</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> wrap</span><span style="color: #0000ff">="physical"</span><span style="color: #ff0000"> placeholder</span><span style="color: #0000ff">="这是一个多行输入框,输入您的个人描述"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
Il y a des espaces entre les balises :
1 <!--文本域标签之间有空格,导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"> </textarea>
Résultat : vide
Raison : Étant donné que la zone de formulaire contient des caractères d'espacement (espaces, tabulations, caractères de nouvelle ligne), les caractères d'espacement dans la zone de texte sont considérés comme du contenu, empêchant l'affichage du texte de l'espace réservé.
Fonctionnement correct :
1 <!--文本域开始标签与结束标签紧挨着,placeholder正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
Résultat : Siège occupé ! ! !
Par défaut, il y a un espacement d'environ "4 px" entre les éléments du bloc en ligne (différents navigateurs seront disponibles dans différents tailles).
1 <ul>2 <li>item1</li>3 <li>item2</li>4 <li>item3</li>5 <li>item4</li>6 <li>item5</li>7 </ul>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none outside none; 7 padding: 10px; 8 background: green; 9 text-align: center;10 }11 ul li {12 display: inline-block;13 *display: inline;14 zoom: 1;15 background: orange;16 padding: 5px;17 }
Cause : causée par des espaces entre les balises.
Solution : à ce stade, vous pouvez modifier la structure du HTML afin que la balise de fin du li précédent soit connectée au début du li suivant et que les caractères d'espacement soient supprimés.
1 <ul>2 <li>item1</li3 ><li>item2</li4 ><li>item3</li5 ><li>item4</li6 ><li>item5</li>7 </ul>
Vous pouvez cliquer ici pour essayer la démo
Bien sûr, les caractères d'espacement sont aussi des caractères, et vous pouvez supprimez-les également par les styles CSS espacement des lettres, espacement des mots à définir. Pour plus de détails, voir : Comment résoudre l'espacement des espaces blancs des éléments de bloc en ligne
qui existent dans le texte sont tels que la ligne suivante les pauses et les espaces.
<span style="color: #0000ff"><</span><span style="color: #800000">div</span><span style="color: #0000ff">></span><span style="color: #000000">They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">><br></span>
结果:浏览器解析的时候只保留单词之间的空白符被合并为一个空格。 They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.
white-space: normal pre | -wrap | pré-ligne | hériter
normal: 合并空白符,允许自动换行 nowrap: 合并空白符,不允许自动换行 pre-line: 合并空白符(不包括换行符),允许自动换行 pre: 不合并空白符,不允许自动换行 pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行)
Pour plus de détails, veuillez consulter : démo
SupplémentAjouter un point : CSS3 a été ajouté deux nouveaux Propriétés de saut de ligne, retour à la ligne et saut de mot.
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!