inline-block间隙问题

我们在使用inline-block是时候，可能会出现一个问题，就是元素之间出现间隙。

我们看看代码：

<style>
li {
  display:inline-block;
  width:20px;
  height:20px;
  background-color:red;
}
ul {
  width:90px;
  background-color:blue;
}
</style>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

效果如下：

可以看到，各个红色方块之间出现莫名其妙的间隙，如果我们把html代码改动如下：

<ul><li></li><li></li><li></li></ul>

会发现间隔就没有了：

这说明间隙其实就是我们输入代码是换行的回车，但是我们不可能将所有代码都写成一行，所以我们可以通过设置font-size:0来解决：

li {
  display:inline-block;
  width:20px;
  height:20px;
  background-color:red;
}
ul {
  width:90px;
  background-color:blue;
  font-size:0;//关键
}