inline

inline

我们在使用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;//关键
}