空白符对HTML结构的影响与解决方案

何为空白符？

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

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

空白符对HTML结构的影响

HTML5中<textarea>标签placeholder无法正确显示

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

标签换行了：

 <!--文本域结束标签 换行导致placeholder无法正确表示-->

 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述">
</textarea>

标签之间有空格：

  <!--文本域标签之间有空格，导致placeholder无法正确表示-->

  <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述">    </textarea>

结果：一片空白

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

正确的操作：

 <!--文本域开始标签与结束标签紧挨着，placeholder正确表示-->

 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述"></textarea>

结果：占位了！！！

inline-block的默认空白间距

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

 <ul>

   <li>item1</li>

   <li>item2</li>

   <li>item3</li>

   <li>item4</li>

   <li>item5</li>

 </ul>

 *{

   margin: 0;

   padding: 0;

 }

 ul {

   list-style: none outside none;

   padding: 10px;

   background: green;

   text-align: center;

 }

 ul li {

   display: inline-block;

   *display: inline;

   zoom: 1;

   background: orange;

   padding: 5px;

 }

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

 <ul>

   <li>item1</li

   ><li>item2</li

   ><li>item3</li

   ><li>item4</li

   ><li>item5</li>

 </ul>

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

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

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

 <div class="container">

     <img class="img" src="data:images/mod.jpg" alt="">

</div>

.container {
　　background: #fc0d0d;
}

.img {

　　display: inline-block;　　

    width: 100%;

}

结果：容器没有显式设置高度与宽度，但是总会比它的子元素img高出几个像素（图中小熊头像下面的红色部分）
解决：把img的display设为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对文本中的空白符进行处理

normal: 合并空白符，允许自动换行

nowrap: 合并空白符，不允许自动换行

pre-line: 合并空白符(不包括换行符)，允许自动换行

pre: 不合并空白符，不允许自动换行

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

详情见：demo

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

长文本段落换行：

这个是在Chrome上的
在Firefox则没有问题，我尝试用white-spacing属性合并空白符，但是还有有一个空格，如果存在换行的话。

以下截图来自WebStorm编辑器和Chrome浏览器。

我看了别人的网站，它这里也存在换行了，但是浏览器没有解析它的空格，也没有看到它的代码里有对p作特殊的处理。

所以只能像前面一样改变HTML结构，去除它的空格。但是把所有文本放在一行，得铺在美国去。。。

解决方案：WebStorm可以设置自动换行——File-setting-Editor-General-Soft wrap（勾选Use soft wrap in editor），虽然视觉上是换行，浏览器解析的时候是按同一行文本解析的，所以不会在浏览器上产生空格。

总结

一般把元素设为inline-block是为了与其他元素在同一行排列，又或是为了能够应用text-align这样的属性，如果没这些必要，又想要对元素显式设置宽高，就

直接设置display: block。

那什么时候适合用inline-block呢？
- float元素脱离了文档流，会对其周围的元素造成影响，而inline-block不会有这些问题。
- 想要通过设置父容器text-align：center让元素居中，这显然用浮动无法做到
- 使元素垂直居中，inline-block元素是沿着默认的基线对齐，可以通过vertical属性设置这个默认基线。

参考资料

MDN：white-space
小火柴的蓝色理想：深入理解CSS中的空白符和换行