一、先简单聊聊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;
三、结语
本文是个人的一点学习心得，欢迎大家和我交流，对于存在错误的地方也欢迎大家纠正，感谢阅读
。