由于产生的空白符，水平间隙是由于空格和换行造成的（元素节点有文本节点，在缩进代码时会占据宽度）！
如下图所示：
1.代码不换行
根据产生间隙的原理，代码不换行即可解决问题，但是这会导致代码的可读性大大降低，这是十分不推荐的（毕竟代码是给人看的）！！
2.设置font-size
1）在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度！！
2）重置父类元素的font-size，让其子元素恢复文字字符，（因为在1）去除了所有的文本，包括子元素的文本和空格回车产生的文本节点）
如下图所示：
<html>
<head>
<style type="text/css">
.nav {
background: #999;
font-size:0;
}
.nav-item{
display:inline-block; /* 设置为inline-block */
width: 100px;
background: #ddd;
font-size:14px;
}
</style>
</head>
<body>
<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>
</body>
</html>
可以看出间隙没有了！！
本博客由博主原创，如需转载需说明出处！谢谢支持