為什麼圖片底下有小空隙？block 與 inline 的根本差異

問題

最近在幫客戶看網站時，發現了一個小小讓人阿雜的地方。

因為背景色和圖片顏色相近，所以即便有這樣的間隔，通常也不會有人注意。但是在手機上，這樣的間隔就會被凸顯，讓整頁幾乎是以圖片製作的一頁式到達頁面 (landing page) 顯得不夠連貫。

關鍵

一開始在檢查元素的時候，將內距 (padding) 與外距 (margin) 都調整成 0，但是仍然無法解決這令人心煩的空隙，因此使用 Google 搜尋了 img smaller than div，才了解到最根本的問題在於 img 這個標記的 display 屬性預設值是 inline，而 display: inline; 在瀏覽器算繪 (render) 的過程中，留下一段空隙，當作文字的 baseline。

補充

img 與 a 標籤，在 HTML 中可以同時作為區塊 (block) 與行內內容 (inline) 使用，根據不同的情境，各自會需要不同的定義。

有些人在製作「文繞圖」的編排時，會將 img 的 display 定義為 inline，至於大多數的情況，我自己會將 img 與 a 定義成 block，在排版時的彈性會比較高（我自己很常用 flex，所以 block 對我來說就還蠻重要的）。

實際操作

解法其實很簡單，只要將 display 屬性值定義成 block 就好。

img {
    display: block;
}

因為平常自己引入 normalize.css 的時候，都已經被定義完畢了，結果自己看到沒有引入 normalize.css 的網頁時，反而忽略了這個根本上的差異。