去除inline-block元素之间的间隙的若干种方法和基线对齐

一、先简单聊聊inline-block

在html的元素中,主要有块级元素(block-level element)、行内元素/内联元素(inline-level element)和行内块元素。

1、块级元素能够支持宽度和高度，并且默认占据一行，从而换行显示。

注意：块级元素和display:block；不是一个概念，块级元素并非都为display:block;例如表格是块级元素,但是他的display为table,

2、行内元素不同于块级元素，他不支持宽度和高度，并且只占据内容所占据的位置，从而不会换行显示。

3、正所谓“鱼，我所欲也；熊掌，亦我所欲也。二者不可得兼，舍鱼而取熊掌者也。”这里的鱼就好比是否换行显示，熊掌就好比宽度和高度。对于块级元素来说，虽然能够支持宽度和高度，但是他却不得不换行显示，于是只能舍鱼而取熊掌了。同理，对于行内元素来说，虽然我不能够支持宽度和高度，但是我不必换行显示呀。好了，既然块级元素和行内元素各有“利弊”，如果想让一个元素既支持高度和宽度（也就是块级元素的属性），又不让他换行显示（行内元素的属性），那该如何？嘿嘿，这时候就该inline-block登场啦！

二、如何去除inline-block元素之间的间隙与基线对齐

2.1 inline-block元素间隙产生的原因和解决方法

在上面已经谈到行内块元素同时具备块级元素和行内元素的属性，例如给div设置display:inline-block;之后，效果如下：

上图中的三个div元素,不仅有宽度和高度，而且并排显示了，不过大家有没有发现他们中间存在着一定的间隙，请看下图黄色圈住的部分，

这部分的空白间隙是怎么来的呢，原因是对于行内元素来说，连续的换行或空格都会被浏览器解析为一个空格。而行内块元素既然具有行内元素的属性，因此就形成了上图中的间隙（下图中的浅灰色部分就是产生的间隙）

好了，我们现在已经知道了行内块元素之间空白间隙产生的原因，那么我们想要去除这些间隙就很容易了（对症下药）。方法有以下几种：

1、注释法

浏览器不会解析注释，所以在div（元素）之间添加注释能够去除他们之间的间隙。

2、标签法

上一个div（元素）闭合标签的>写在下一个div（元素）开始标签的<之前。

3、使用font-size:0;

给body设置font-size:0;div设置font-size:16px;这种方法不推荐使用，因为给body设置了font-size:0;之后，你都需要给那些有字体的部分设置字体大小（例如font-size:16px;）。

4、使用负外边距

5、使用空的行内标签

2.2 基线对齐

在说基线对齐之前，不知道大家以前高中时期有没有用英语本抄写英语单词。回想起我读高中的时候，我的英语书法那可以说是抽象派，那笔画连得有时候我自己都看不懂，在几次被老师说了以后，我终于下定决心去练一练我的英语书法，专门买了一本英语书法去临摹，然后每天都花半小时左右去练习，就这样日积月累，我的英语书法也慢慢的变好了。

扯了这么多，那么基线到底是什么呢，请看下图：

基线就是字母X的下边缘，也就是四格线从上往下数的第三根线。我们现在已经了解了inline-block和基线，那我们就来看看他们有神马关系~~

不知道大家有没有碰到这样的问题，对于inline-block元素，当他里面没有内容时，是这样的：

当给第一个元素添加内容的时候，是这样的：

what the f**k!第一个元素居然掉下来了，其实这就是基线对齐（vertical-align默认对齐方式，对块级元素没有作用）搞的鬼。对于inline-block元素来说，如果他里面没有行内元素的话，他的基线就是margin-bottom的下边缘，而如果里面有行内元素的话，基线就是行内元素的最后一行。所以第一个元素的基线变成了字母X的下边缘，而另外两个元素的基线是margin-bottom的下边缘（此时margin-bottom为0），于是乎，第一个元素就掉下来喽。如果还没弄明白的话，我们可以多看几个例子，

第一个元素有3行

第二个元素margin-bottom:20px;

三、结语

本文是个人的一点学习心得，欢迎大家和我交流，对于存在错误的地方也欢迎大家纠正，感谢阅读。