img 圖片空白間隙問題

發表於 更新於 分類於
解決網頁img圖片垂直堆疊時，下方出現莫名的空白間隙

空隙問題

img 圖片預設下方會有 2 ~ 3px 空隙

因為圖片預設是 inline 元素，而 inline 元素的 vertical-align 設定預設是和父元素的 baseline 對齊的，而 baseline 本身又和父元素底邊有一定的間距。這個間距是來自於英文文字中像是 j, y 這些超過基準線的字符。

解法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 解法一是可以將 vertical-align 設為 top/bottom/text-top/text-bottom
// 改變與父元素的對齊基準
#align-base img {
  vertical-align: bottom;
}

// 解法二的用意是將 img 改為區塊元素
#display img {
  display: block;
}

// .box 是指 img 的父元素，解法三的方式是讓文字大小為 0px，進而讓因為文字而有的間距不見。
.box {
  font-size: 0px;
}