「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例： 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/forum/read.php?804,17462,17462#msg-17462 Mon, 21 Sep 2026 08:44:25 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,17462,17462#msg-17462 http://mepopedia.com/forum/read.php?804,17462,17462#msg-17462
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]]> HP 網頁設計與語法（HTML/CSS） Thu, 03 Nov 2011 17:48:03 +0800