数据带换行对html的影响,空白符对HTML结构的影响与解决方案

何为空白符？

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

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

空白符对HTML结构的影响

HTML5中标签placeholder无法正确显示

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

标签换行了：

1

2

标签之间有空格：

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

item1item2item3item4item5

7

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

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

除了相邻之间的Inline-block的空白间距外，像下面这种情况，也会产生空白符