Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[CSS] 圖片空隙的起因:圖片標籤(img)是內文元素(inline element),會有「尾巴」

「圖片空隙」是一個很經典的問題。以下面這位同學的網頁為例:

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



Edited 2 time(s). Last edit at 02/04/2012 08:47PM by JinJin.
(編輯記錄)