inline-blcok 之間的空白間隙

前言：

• inline-blcok 佈局時，一般狀況下， inline-blocks 之間有空白，儘管一般咱們是不想要的，畢竟不像padding或者margin同樣好控制，如圖：

<div class="parent">
    <span class="child child1">child child1</span>
    <span class="child child2">child child2</span>
    <span class="child child3">child child3</span>
    <span class="child child4">child child4</span>
    <span class="child child5">child child5</span>
  </div>

* {
  margin: 0;
  padding: 0;
  color: black;
}
.parent {
  background-color: pink;
}
.child {
  display: inline-block;
  border: 10px solid darkorange;
  background-color: lightblue;
}

緣由

產生空白的緣由，其實有兩個：

• white-space默認爲normal，根據MDN上來講，就是

連續的空白符會被合併，換行符會被看成空白符來處理。填充line盒子時，必要的話會換行。

這個不合理麼？不，這是合理的，這也就是爲何你的行內標籤之間有那麼多空白符或者換行，可是在實際展現的時候，都被縮成了一個空白。

• inline-blcok元素對外是按照IFC來佈局的，因此 inline-blcoks 之間的空白就變會被合併，變成一個空白，若是 inline-blcoks 之間沒有空白，那天然就不存在這個問題了，固然這在實際編碼中可行性不大。

方案：

• text-space-collapse:discard，然而這個規範纔出來，2018.5 尚未瀏覽器支持，戳 草案
• 負偏移，具體有不少種設置方法，以下：

1. .parent設置letter-spacing : -0.3em，.child設置letter-spacing:0。.parent的letter-spacing過大也不會有大問題，opera 老版瀏覽器和 IE6/7 可能會有問題。
2. .child 設置margin-right:-0.3em。但margin-right過大可能會產生負間隙。
3. .parent設置word-spacing : -0.3em，.child設置word-spacing:0。但.parent的word-spacing過大可能會產生負間隙。

• .parent設置font-size : 0，.child把font-size設置成原來的值。缺點明顯，若是原來字號都用的em，就不太好用。
• 回float佈局或去flex佈局。

總結：可行的方案就是負偏移和font-size，考慮兼容性就結合font-size和letter-spacing ，如：

.parent {
  letter-spacing: -0.3em;
  font-size: 0;
}
.child {
  display: inline-block;
  letter-spacing: 0;
  font-size: 12px;
}

若是不考慮 opera 老版瀏覽器，就 letter-spacing就能夠了，這個應該是趨勢。

注意letter-spacing不要用-0.3em和-0.31em以外的值，不然會出現相似下面的狀況，在 chrome66上測試過。

除此以外，還有些十分不優雅的方法，這裏就截圖一下，看看就好：

參考文章：
How do I remove the space between inline-block elements?
display: inline-block extra margin
Unwanted margin in inline-block list son sons
拜拜了浮動佈局-基於 displayinline-block 的列表佈局