「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例：
http://mepopedia.com/~web100a/hw04/hw04-1001445068/
在網頁最後的 #footer 部份可以看到最後有一整條很小但依舊在的「空隙」。
解釋如下：基本上 img 標籤不像 div 一樣是「區塊元素」，而是一個比較像文字的「內文元素」（inline element），也就是像是文字一樣。而為了讓像 y、g、j 這樣文字可以正常地顯示「尾巴」，所以在文字底下會有一些空隙讓文字能正常顯示。但對圖片來說，這個「空隙」通常不是我們想要的。
示意圖片：
![]()
解決方式有二：
1. 把 img 設定「區塊元素」：display: block。
2. 把 img 設為「垂直置底」：vertical-ailgn: bottom。
還有一個解決方式是，不要直接用圖片標籤（img），以 CSS 背景圖片（background-image）的方式呈現，就不會有這個問題了。這是為什麼呢？因為「背景」基本上都是設在 DIV 這類的「區塊元素」裡，所以也不會有「內文元素」的問題了。
另有一實例。這個用 IE 看一直有空隙但不知怎麼解決的網頁（請注意導覽列下面的白色空隙）：
http://mepopedia.com/?page=653
http://mepopedia.com/~web100a/hw04/hw04-1001445068/
在網頁最後的 #footer 部份可以看到最後有一整條很小但依舊在的「空隙」。
解釋如下：基本上 img 標籤不像 div 一樣是「區塊元素」，而是一個比較像文字的「內文元素」（inline element），也就是像是文字一樣。而為了讓像 y、g、j 這樣文字可以正常地顯示「尾巴」，所以在文字底下會有一些空隙讓文字能正常顯示。但對圖片來說，這個「空隙」通常不是我們想要的。
示意圖片：
解決方式有二：
1. 把 img 設定「區塊元素」：display: block。
2. 把 img 設為「垂直置底」：vertical-ailgn: bottom。
還有一個解決方式是，不要直接用圖片標籤（img），以 CSS 背景圖片（background-image）的方式呈現，就不會有這個問題了。這是為什麼呢？因為「背景」基本上都是設在 DIV 這類的「區塊元素」裡，所以也不會有「內文元素」的問題了。
另有一實例。這個用 IE 看一直有空隙但不知怎麼解決的網頁（請注意導覽列下面的白色空隙）：
http://mepopedia.com/?page=653