2010-06-27 26 views
22

我在我的網頁中的img標記下面填充了某種填充。在HTML的樣子:<img>標記下的額外填充?

<li> 
    <div>Title</div> 
    <img src='...' width='60px' height='60px' /> 
</li> 

呀所以有大約5圖像下方的填充像素(我可以告訴大家,因爲李父項的背景顏色是不同的)。我試着用padding/margin/border將所有類設置爲零,但沒有改變,將一個類分配給img標籤。我想知道是否有什麼我錯過了關於可能導致此填充出現的img標籤?

當我刪除img標籤,和剛剛離開的「標題」格中,微胖走了,

感謝

-------------更新 - ------------------

這隻發生在FF,鉻和safari看起來沒問題。 Firebug還顯示填充是img元素的一部分。

+0

這是在所有的瀏覽器? – 2010-06-27 16:55:04

+0

這不是來自'li'嗎?您是否使用Firebug來確定哪個元素會導致該空間? – 2010-06-27 16:59:38

+0

哦,嗯,不,這似乎是發生在FF,鉻和Safari瀏覽器都可以。 – user246114 2010-06-27 17:00:52

回答

0

如果您在img元素上強制填充邊距和邊框爲0會怎麼樣?你在使用Firebug嗎?

1

我想你可能會在列表項目結束之前看到圖片之後的空白。試着在你的HTML擺脫空白的,就像這樣:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li> 
+0

解釋你的downvotes人。這有時會引起問題。 – ScottE 2010-06-27 17:45:10

+1

@ScottE非常真實。我沒有投票給他,但我認爲他沒有解決問題,因此得到了投票。 – 2010-06-27 17:58:19

0

你可以提供一個鏈接或更多的代碼,以便更好地解決你的問題,但是:

驗證是否你的形象是由60像素在img標籤

2. 取出填充,並從IMG保證金和邊境60PX的設置,你可能有IMG標記默認設置,使你在裁判什麼

您的IMG下額外的空間可能來自於你的頁面的其他元素,這意味着與地方的IMG,一些元素的力量,額外的空間

46

如果你可以設置圖像的display風格至block即應解決問題。將vertical-align設置爲bottommiddle也應起作用。我認爲這個問題的出現是因爲Firefox試圖定位內嵌圖像,所以它們的底邊與文本的基線對齊,因此圖像下方的文字下降區會有空間。

+6

+1默認情況下,「vertical-align」設置爲「baseline」,在這種情況下,您需要「bottom」。浮動的工作,但它是一種副作用,它也可能導致副作用。 – FelipeAls 2010-06-27 17:47:53

+3

'vertical-align:bottom'爲我解決了這個問題,並且沒有改變顯示風格的所有副作用。謝謝! – 2011-10-23 04:25:54

+0

+1像Crisp一樣工作! ;) – uday 2013-05-02 20:36:31

2

只需在樣式標記中爲圖像添加高度屬性,就像如果您需要細線,則需要爲Safari瀏覽器外部指定1px。