inline-block間隙問題

我們在使用inline-block是時候，可能會出現一個問題，就是元素之間出現間隙。

我們看看代碼：

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

效果如下：

可以看到，各個紅色方塊之間出現莫名其妙的間隙，如果我們把html代碼改動如下：

會發現間隔就沒有了：

這說明間隙其實就是我們輸入代碼是換行的回車，但是我們不可能将所有代碼都寫成一行，是以我們可以通過設定font-size:0來解決：

li {
  display:inline-block;
  width:px;
  height:px;
  background-color:red;
}
ul {
  width:px;
  background-color:blue;
  font-size:;//關鍵
}