The space in between inline-block elements

想要練習一些CSS動畫，參考 https://tobiasahlin.com/spinkit/ ，先不看sorce code 來自已寫。

先作5根柱子：

<div class="wrapper>
  <div><div>
  <div><div>
  <div><div>
  <div><div>
  <div><div>
</div>

因為想要指定白柱寬度，又要在同一行，所以使用inline-block；每根白柱width:7px，間距3px。wrapper 給剛好的寬度 width:47px。

.wrapper {
  margin: 50px auto;
  width: 47px;
  height: 40px;
}
.wrapper div {
  display: inline-block;
  width: 7px;
  height: 100%;
  background-color: #fff;
}
.wrapper div:not(:last-child) {
  margin-right:3px
}

結果柱子掉下來了，白柱之間空間超乎預期，不知道是什麼東西？

用chrome dev tool 看起來很正常，是我要的設定。柱子之間應該多了什麼。但又看起來沒有什麼。

所以我還是去看了原作者的source code，發現關鍵的一行，在 wrapper中加上 font-size: 10px。各白柱之間的空間不設margin，而是使用font-size控制距離。拿麼神奇？

只好用google大神查看看MDN怎麼說：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#Spaces_in_between_inline_and_inline-block_elements

原來是inline-block之間的空間，是來自於html中的斷行 …

(1) MDN中最推薦的方法是直接改寫成flex，輕鬆搞定：

.wrapper {
  ...
  display: flex; /* 新增這行 */
}
.wrapper div {
  ...
  /* diaplay: inline-block 把原本這行移除*/
}

(2) 如果一定要使用 inline-block，那麼在 wrapper 中設定 font-size:0

.wrapper {
  ...
  font-size: 0; /* 新增這行 */
}

(3)在白柱的div中加上 float: left ，但我個人不愛這個解。

.wrapper div {
  ...
  float: left; /* 新增這行 */
}

(4)不用更動css，只要html中各個白柱的div之間不要斷行。這當然是最不推薦的。（這解法真是嚇壞我了）

<div class="wrapper>
  <div><div><div><div><div><div><div><div><div><div>
</div>

總之，大功告成。總算可以繼續練習寫css animation了。