我在前端开发过程中经常遇到两个Inline-Block元素中间出现空格的问题，特别是横向导航栏，于是打算写一篇文章记录一下。
问题大概是这样的：
我写了HTML，CSS代码如下
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>li {
display: inline-block;
省略掉其他代码...
}结果悲剧是这样的…
当然这不是我想看到的…于是google了下，大概是这样的：
Inline-block中间的间隔就像英文单词之间的空格，为了区分开每个block，所以这不算是‘bug’。
但是这不是我们想要的效果对吧~解决方法如下：
去掉空格
既然原因知道了，那就对症下药删掉空白不就行了，修改html代码变成这样。
<ul>
<li>1</li><li>2</li><li>3</li>
</ul>元素与元素之间的空白不见了，问题也就解决了。
不过代码看上去有点丑，再优化一下。
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>看上去整洁一下了吧！
移动子元素
还可以通过移动子元素覆盖掉空格。根据间隔的大小，移动相应的距离就能轻松覆盖掉。简单地使用margin-right.
li {
margin-right: -5px;
}margin-right设置为负值，会导致右边的元素全部左移动。所以每个元素都设置属性margin-right就很巧妙地覆盖掉了。当然5px是跟你的font属性有关的。
不写结束标签
这算是一种比较奇葩的做法。在HTML5下不会有问题，但是不推荐使用。
<ul>
<li>1
<li>2
<li>3
</ul>实验过，发现使用span等标签会出现嵌套问题。
设置font-size为0
em…一开始在群上问的时候，很多人都推荐这个方法。可是用起来很别扭ei。
ul {
font-size: 0px;
}
ul li {
font-size: 16px;
}使用Flexbox
我相信flexbox将来肯定会发光发亮，可是现在兼容性不强~
ul.flexbox {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}其他
还有其他方法，比如使用float代替…不过有时候并不能解决我们的问题。所以就不说了。
上面的几种方法，比较中意的是使用<!-- -->注释掉。这样做不会增加多余的css代码，而且兼容性很强。flexbox用起来很爽，但是现在还用不上。
最后
最后的最后附上codepen。
See the Pen GJQywQ by Helkyle (@HelKyle) on CodePen.
嗯，写完以后不用再去google了。
版权声明：本文为博主原创文章，未经博主允许不得转载。