今天就來整理，如何消除使用 inline-block 時，
那個惱人的安全社交距離吧（痾不是啦，是空白間距）。

怕有人不理解我在講什麼，
我先上範例檔讓大家知道是什麼情況。

範例檔

HTML

<ul>
  <li>就是這個 -></li>
  <li><- 就是這個</li>
  <li><- 就是這個</li>
  <li><- 就是這個</li>
</ul>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

ul{
  text-align: center;
}

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
}

會產生這主要的原因就是 li 與 li 之間的空白字元，
以下整理一些常見的解決方式

1. 刪除他

最簡單暴力的方式，就是不要讓他有空格，所以 HTML 就會變成以下這樣

<ul>
  <li>就是這個 -></li><li><- 就是這個</li><li><- 就是這個</li><li><- 就是這個</li>
</ul>

但這個方法其實對於 HTML 的結構閱讀性來說並不是一個太好的作法

2. 註解掉他

其實這個方式跟前一個滿接近的啦，但算是保持了 HTML 的結構，但又多了些多餘的東西

<ul>
   <li>就是這個 -></li><!--
--><li><- 就是這個</li><!--
--><li><- 就是這個</li><!--
--><li><- 就是這個</li>
</ul>

3. margin 掉他

這個方法不會去動到 HTML 的結構，
但是這方法，因應字型的關係，設定的值一般會落在 4-5px 之間，
並不是一個太精準的作法，像我自己的範例，我試到快 6px 才能消除掉。

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
  margin-right: -6px; /* 或是設定 margin-left */
}

4. 0 掉他

這應該是這幾種作法裡面，我唯一會用的作法了，
父層設定字體大小 font-size: 0，空白字元自然不佔空間，
這個比較麻煩的就是內容子層要另外設定字體大小。

ul{
  text-align: center;
  font-size: 0;
}

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
  font-size: 16px;
}

當然你也可以偷懶，父層直接設定 display: flex 直接沒有這個問題，
或是你深愛 float，不過記得要清除浮動，
但如果你堅持想使用 inline-block，
這幾種作法可以幫助你解決那些煩人的空白字元，
今天就先到這裡啦～
我們明天見。