前端小白进阶之路-技巧篇（行内元素及行内块元素空白符处理）

在前端开发中，将几个固定宽高的容器并列排布是及其常见的页面效果，实现这个效果的方式有很多种，可以用定位，浮动，弹性盒，行内块等等，而且每个都有自己的优缺点，今天老夫就带领大家来聊聊关于常用到的使用行内块排列的时候存在多余空白符的问题，看看这个空白符到第是什么人在作祟。

我们就用列表先来看一下效果：

在ul中有三个li，给上样式：

结果如下：

为了让他们一行排列，我们给li设置行内块属性：

结果如下：

可以看到，已经一行排列了，但是好像不是我们想要的效果啊，我们希望是挨着排列的，怎么中间会有空白的内容呢，其实那是我们自己写的，不信来看，我们的html代码是这样的（用编辑器的小伙伴都可以设置显示空白来看的更清晰）：

可以看到，为了让代码简洁易读每个li中我们都是换行来实现的，而浏览器则会把这个换行符显示为一个空白符号，这样我们就会无形中多出一个空白，而浏览器偏偏就解析了出来，是不是很尴尬，这也就是空白符的由来了。那么我们是不希望由他的存在的啊，该怎么消除他呢，老夫这里提供以下几种常见方法来处理：

1.代码不换行

这种方式是从根源上解决问题，彻底的去除了换行符，但是一个显而易见的问题就是代码结构不清晰，很难阅读。

2.巧妙换行

我们将每行代码的最好一个标签移到下一行代码的首部巧妙的实现了换行，但是也有问题就是如果标签多了的话看起来还是很乱

3.注释标签

这种方式也是投机取巧的方法，因为注释是属于注释标签的，而浏览器不解析注释标签，所以就不会显示空白符了，但是页面中存在诸多的注释也不是好现象吧。

4.利用font-size

这种方式是给大盒子设置font-size：0；以此来将空白符的大小设置为0，从视觉上消除了空白符，但是又一个问题就是同时里面文字的大小也会为0。

5.利用word-spacing

在我们将元素设置为行内块时浏览器就会用解析文字的方式来解析，而word-spacing是用来设置单词之间的距离的，所以设置他的外边距为负值是可以实现的，而这个值也会根据不同浏览器变化，自然而然也就出现问题。

6.利用letter-spacing

这种方式和上边的原理相同，老夫在这里就不多说了。

以上所有情况的最终结果都是去掉了空白符，结果如下：

确实是达到了我们要的效果。

以上方法只是在设置为行内块元素的情况下的一些见解，具体哪种好哪种不好没有个批判标准，而且一行排列也不只能是行内块，还有上边提到的定位，浮动，弹性盒等，所以使用时得具体问题具体分析，找到适合自己最完美的方案来实现。

好了，今天的空白符就说到这里，这个问题也是工作中常见到的，希望大家了解原因以便能够方便解决问题。下回我们该说说什么呢，待老夫整理整理发型，活动活动筋骨，我们下回再续。

＋web前端扣扣裙：956766604 免费网课在线学习以及问题解答、项目指导服务，配合强大的学习工具，带你完成九大实战项目，经历从零基础到专业前端工程师的完美蜕变。

欢迎初学和进阶中的小伙伴。裙里有免费的学习资料，还有专业老师为你解惑，更有免费体验课、免费直播课等福利不定期放送。