何为空白符？空白符对HTML结构影响

空白符: 空格、制表符、换行符

注意：浏览器在解析HTML时会把所有空白符合并成一个空格

不好的结构造成意外的结果：

标签换行了：

1 !--文本域结束标签 换行导致placeholder无法正确表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 这是一个多行输入框，输入您的个人描述 
 /textarea 

标签之间有空格：

1 !--文本域标签之间有空格，导致placeholder无法正确表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 这是一个多行输入框，输入您的个人描述 /textarea 

结果：一片空白

原因：因为表单区域中包含了空白符（空格、制表符、换行符），textarea内的空白符被认为是内容，阻止了占位符文本的显示。

正确的操作：

1 !--文本域开始标签与结束标签紧挨着，placeholder正确表示-- 2 textarea id= description name= description rows= 5 cols= 30 wrap= physical placeholder= 这是一个多行输入框，输入您的个人描述 /textarea 

结果：占位了！！！

默认情况下，inline-block元素之间大约有“4px”的间距（不同浏览器会有不同的大小）。

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 }

原因：标签之间的空白符造成的。

解决：此时可以通过改变HTML的结构，让上一个li的结束标签与下一个li开始相连，去除空白符。

1 ul 2 li item1 /li3 li item2 /li4 li item3 /li5 li item4 /li6 li item5 /li 7 /ul 

你可以点击这里狠狠尝试demo

当然，空白符也是字符，去除它们也可以通过CSSyangshi_10628_1.html' target='_blank'>CSS样式letter-spacing、word-spacing来设定。详情见：如何解决inline-block元素的空白间距

如下面的换行符，和空格。

 div They can stay 72-hours  within the Shandong province after they have entered China via the Qingdao International Airport. /div 

结果：浏览器解析的时候只保留单词之间的空白符被合并为一个空格。They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.

white-space：normal | pre | nowrap | pre-wrap | pre-line | inherit

normal: 合并空白符，允许自动换行nowrap: 合并空白符，不允许自动换行pre-line: 合并空白符(不包括换行符)，允许自动换行pre: 不合并空白符，不允许自动换行pre-wrap: 不合并空白符，允许自动换行(在pre基础上，保留自动换行)

详情见：demo

补充一点：CSS3新增了两个换行属性word-wrap和word-break。

以上就是何为空白符？空白符对HTML结构影响的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。