认真写过前端的同学（不是“Copy and Paste From Stack Overflow”）几乎都遇到过inline-block空隙问题（没碰到也没关系，我下面会重现这个问题）。网上也给出了各种奇技淫巧来解决这个问题，其中以张鑫旭的《去除inline-block元素间间距的N种方法》的解决方案最全，但hack味道过浓，这里我用Flexbox解决这个问题，优雅且简洁。
问题重现
属性是display: inline-block水平呈现的元素之间，换行显示或空格分隔的情况下会有间距。这种情况最常见于导航栏，看如下HTML和CSS代码：
<body>
<ul>
<li>首页</li>
<li>新闻</li>
<li>关于</li>
<li>联系</li>
</ul>
</body>
ul {
list-style: none;
}
ul li {
display: inline-block;
background-color: #8192D6;
color: white;
padding: 4px 6px;
}
产生的效果如下图所示：
inline-block空隙
这种表现是符合规范的应该有的表现，不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它。
经典解决方案
网上有很多的解决方法，分别从修改HTML、CSS和JavaScript的角度来解决这个问题，所以你就可以看出这个问题有多么的常见以及多么的扰人了吧！这里我们介绍几种HTML和CSS解决该问题的经典方法，JavaScript解决这个问题实在是大材小用了。
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。有如下几种HTML的解决方法：
- 将所有的inline-block元素写在一行中，这种做法对于当前这种元素少的情况很适用，但是元素多了全都挤在一行很难阅读和维护。
<ul>
<li>首页</li><li>新闻</li><li>关于</li><li>联系</li>
</ul>
- 改变标签的位置，没错这样做代码真的很丑，不忍卒读。
<ul>
<li>
首页</li><li>
新闻</li><li>
关于</li><li>
联系</li>
</ul>
或者：
<ul>
<li>首页</li
><li>新闻</li
><li>关于</li
><li>联系</li>
</ul>
或者使用注释：
<ul>
<li>首页</li><!--
--><li>新闻</li><!--
--><li>关于</li><!--
--><li>联系</li>
</ul>
使用CSS解决也有很多局限性，比如：
- 通过设置父元素的
font-size: 0可以让间隙消失，但同时你得修改子元素的字体大小，如果子元素很少倒也没啥问题，但是如果子元素很多，你就得一个一个去设置，这个就很麻烦了。 - 或者你可以设置
margin或letter-spacing或word-spacing属性为负值，也可以去掉空隙，但这样做跨浏览器兼容性不好。
Flexbox优雅解决
Flexbox只要在ul的样式中加一句话就可以了：
ul {
display: flex;
}
此时的心情应该如下图：
这是飞一样的感觉
