之前在回覆問題時，不少人都會發現這個有點奇怪的現象 - 圖片下方有一個莫名的間距
這一篇就來說明一下原理以及解決方法吧！
如下面 codepen 範例中，圖片下方會有一個空隙：
原因說明
因為圖片預設是 inline 元素，而 inline 元素的 vertical-align 設定預設是和父元素的 baseline 對齊的，而 baseline 本身又和父元素底邊有一定的間距。這個間距是來自於英文文字中像是 j, y 這些超過基準線的字符。
圖片來自 overstackflow 回覆
解法
了解原因之後也就可以明白，要去除掉下方的空隙可以使用以下三種方法：
- 解法一：
1
2
3img {
vertical-align: top/bottom/text-top/text-bottom;
}
解法一是可以將 vertical-align 的設定修改為 top/bottom/text-top/text-bottom 改變與父元素的對齊基準。
- 解法二：
1
2
3img {
display: block;
}
解法二的用意是將 img 改為區塊元素，讓圖片不會因為行內（inline）元素的特性而受到影響。
- 解法三
1
2
3.box {
font-size: 0px;
}
.box 是指 img 的父元素，解法三的方式是讓文字大小為 0px，進而讓因為文字而有的間距不見。