【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

inline-block之間為何會有空白？

在撰寫HTML時，由於inline-block有與同類並排在同一行的特性，我們通常會寫出這樣的程式碼：

<a href="#">連結1</a>
<a href="#">連結2</a>

範例網址：https://codepen.io/linchinhsuan/pen/ZEaVEbj

此時兩個<a>確實如我們預期的並排了
然而，當我們加上background-color之後會發現，兩個<a>之間居然出現了空白
加了CSS reset之後也仍存在
神奇的是，當我們用開發人員工具查看時，會發現那既不是margin也不是padding，但它就是在那

這一切的原因是因為inline-block本身具有的特性：
HTML元素之間的空白、換行及 Tab 字元將佔用一格空間

至此，空白的真實身份為何也就很清楚了，在這個範例中就是第一個<a>和第二個<a>之間的「換行」
因此如果我們不換行，例如：

<a href="#">連結1</a><a href="#">連結2</a>

空白就不會出現，但實務上我們通常不會這樣做，畢竟為了可讀性，換行是必須的

解決方案

範例：https://codepen.io/linchinhsuan/pen/Bamvadd

解法1：將容器的font-size屬性設定為0

因為空白的大小取決於容器的font-size屬性
因此，我們可以將容器的font-size屬性設定為0（讓空白大小變成0）來解決
但這個方案會繼承到裡面的<a>，所以要在子層的<a>再設定一次字體大小。

解法２：直接改變inline-block元素

因為空白的起因是inline-block本身具有的特性
那，如果元素不是inline-block，那不就沒問題了嗎？
在這個範例中，我們使用display: flex;，讓兩個<a>變成flex-item，這樣就不會有inline-block的問題了

.container2{
    display: flex;
 }