何为空白符？
空白符: 空格、制表符、换行符
注意：浏览器在解析HTML时会把所有空白符合并成一个空格
空白符对HTML结构的影响
HTML5中
不好的结构造成意外的结果：
标签换行了：
1 <!--文本域结束标签 换行导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述">
</textarea>
登录后复制
标签之间有空格：
立即学习“前端免费学习笔记（深入）”；
1 2
登录后复制
结果：一片空白
原因：因为表单区域中包含了空白符（空格、制表符、换行符），textarea内的空白符被认为是内容，阻止了占位符文本的显示。
正确的操作：
1 2
登录后复制
结果：占位了！！！
inline-block的默认空白间距
默认情况下，inline-block元素之间大约有“4px”的间距（不同浏览器会有不同的大小）。
1
- 2
- item1 3
- item2 4
- item3 5
- item4 6
- item5 7
登录后复制
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
- 2
- item1
- item2
- item3
- item4
- item5 7
登录后复制
你可以点击这里狠狠尝试demo
当然，空白符也是字符，去除它们也可以通过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.
登录后复制
可以通过CSS属性white-space对文本中的空白符进行处理
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结构影响的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3196092.html
