為什麼圖片底下有小空隙?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 的網頁時,反而忽略了這個根本上的差異。

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124