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

圖片下方有空白？

在撰寫HTML時，當我們使用<img>這個HTML標籤時，會發現圖片下方會有大約4px左右的距離
在背景為白色的時候不太明顯，我們將背景背景替換來看看：
https://codepen.io/linchinhsuan/pen/mdqoJKa
從這個案例我們可以看到圖片底部出現一個小留白區域（因此我們才看得到紅色背景）

那為什麼會有這段空白呢？
因為<img>的display屬性默認是inline-bolck，而這個屬性的vertical-align的默認值是baseline
當vertical-align的值為baseline時會讓文字和其父元素的基（準）線對齊
目的是因為英文中像是小寫 g j p q y，會超出基線以下，因此必須預留一段空間給這些會在基線以下的字
然而，<img>圖片因為vertical-align的值為baseline
所以它只會在基線上，因此當<img>和文字並排時，圖片底部就會出現一個小留白區域

可以將範例中的註解打開，我將font-size調整為100px，此時就會發現圖片下方的空間變大了

span{
  font-size: 100px;
}

原因也不難理解，因為文字變大，基線以下的空間當然也變大（前面所說的4px，是因為網頁預設的字體大小為16px的緣故）

到此，大致理解了為何會有這個留白區域

解決方案

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

解法1：將<img>的vertical-align設置為其他

因為問題是出在<img>的vertical-align的值為baseline的緣故
因此只要將<img>的vertical-align設置為middle就可解決

img{
  vertical-align: middle;
}

解法2：直接將<img>改變的display屬性

由於vertical-align適用於display屬性值為inline、inline-bolck、table-cell 的元素
而<img>圖片本身會有一個display: inline-bolck屬性，如果破壞這個特性即可解決圖片下方空白的問題
例如：

img{
  display: block;
}

或是：

.bg-red{
  display: flex;
}

在外層下display: flex;讓<img>變成flex-item，同樣可以解決問題