迷之间隙
我们建立一个导航列表，并将其列表 item 设置为 inline-block，重要代码以下：
<div class="nav">
<div class="nav-item"><a>我</a></div>
<div class="nav-item"><a>我</a></div>
<div class="nav-item"><a>我</a></div>
</div>
.nav {
background: #999;
}
.nav-item{
display:inline-block; /* 设置为inline-block */
width: 100px;
background: #ddd;
}
结果图以下：
我们从结果图中能够看到列表 item 之间有一点小闲暇，然则我们在代码中并没有设置 margin 程度间距。那末这个闲暇是怎样发生的呢？
这是因为我们编写代码时输入空格、换行都邑发生空缺符。而浏览器是不会疏忽空缺符的，且关于多个一连的空缺符浏览器会自动将其合并成一个，故发生了所谓的间隙。
关于上面实例，我们在列表 item 元素之间输入了回车换行以轻易浏览，而这间隙恰是这个回车换行发生的空缺符。
一样关于一切的行内元素（inline，inline-block），换行都邑发生空缺符的间隙。
怎样消弭空缺符
从上面我们相识到空缺符，是浏览器平常的表现行动。然则关于某些场景来讲，并不雅观，而且间隙大小非可控，所以我们每每须要去掉这个空缺间隙。平常来讲我们有两种要领来去掉这个换行引发间隙：代码不换行和设置 font-size。
代码不换行
我们相识到，因为换行空格致使发生换行符，因而我们能够将上述例子中的列表 item 写成一行，如许空缺符便消逝，间隙就不复存在了。其代码以下：
<div class="nav"> <div class="nav-item">导航</div><div class="nav-item">导航</div><div class="nav-item">导航</div> </div>
但考虑到代码可读及保护性，我们平常不发起连成一行的写法。
设置 font-size
首先要明白空缺符归根结柢是个字符，因而，我们能够经由过程设置 font-size 属性来掌握发生的间隙的大小。我们晓得假如将 font-size 设置为 0，笔墨字符是没法显现的，那末一样这个空缺字也没了，间隙也就没了。
因而顺着这个思绪就有了另一个解决方案：经由过程设置父元素的 font-size 为 0 来去掉这个间隙，然后重置子元素的 font-size，让其恢复子元素笔墨字符。
所以该要领代码以下：
.nav {
background: #999;
font-size: 0; /* 空缺字符大小为0 */
}
.nav-item{
display:inline-block;
width: 100px;
font-size: 16px; /* 重置 font-size 为16px*/
background: #ddd;
}
运用该要领时须要特别注意其子元素肯定要重置 font-size，不然很轻易掉进坑里（笔墨显现不出来）。
对齐题目
因为 inline-block 属于行内级元素，所以 vertical-align 属性一样对其实用。
在正式解说 vertical-align 之前，我们须要先说一些基本概念。
中线、基线、顶线、底线
中线（middle）、基线（baseline）、顶线（text-top、底线（text-bottom））是文本的几个基本线，其对应位置以下图：
基线（base line）：小写英笔墨母x的下端沿。
中线（middle line）：小写英笔墨母x的中心。
顶线（text-top）：父元素 font-size 大小所构成的一个内容地区的顶部
底线（text-bottom）：父元素 font-size 大小所构成的一个内容地区的底部
vertical-align 的值
vertical-align 只接收8个关键字、一个百分数值或许一个长度值。下面我们将看看各关键字怎样作用于行内元素。
baseline 默许元素的基线与父元素的基线对齐。
sub 将元素的基线与其父元素的下标基线对齐。
super 将元素的基线与其父代的上标 - 基线对齐。
text-top 将元素的顶部与父元素的字体顶部对齐。
text-bottom 将元素的底部与父元素的字体的底部对齐。
middle 将元素的中心与基线对齐加上父元素的x-height的一半。
top 将元素的顶部和厥后代与整行的顶部对齐。
bottom 将元素的底部和厥后代与整行的底部对齐。
<length> 将元素的基线瞄准给定长度高于其父元素的基线。
<percentage> 像<长度>值，百分比是line-height属性的百分比
以上就是CSS中display: inline-block的用法剖析的细致内容，更多请关注ki4网别的相干文章！
