干掉Inline-Block中间的空格

我在前端开发过程中经常遇到两个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了。