額外填充下 <img> 標簽？

Question

我在網頁上的img標簽下面有一些填充。 html看起來像：

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

是的，因此在圖像下面有大約5個像素的填充（我可以說，因為父項目的bg顏色不同）。 我嘗試將一個類分配給img標簽，其中padding / margin / border都設置為零，但沒有變化。 我想知道是否有任何關於img標簽的遺漏可能導致這種填充出現？

當我刪除img標簽，然后離開'title'div時，額外的填充消失了，

謝謝

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

這只發生在FF，鉻和野生動物園看起來不錯。 Firebug還顯示填充是img元素的一部分。

Answer 1

如果您可以將圖像的display樣式設置為block解決問題的方式。 將vertical-align設置為bottom或middle也應該有效。 我認為問題出現是因為Firefox試圖定位內嵌圖像，因此它們的下邊緣與文本的基線對齊，因此圖像下方有文本下限的空間。

Answer 2

只需在樣式標記中將高度屬性添加到圖像中，就像需要細線一樣，然后需要在外部為safari指定1px。

Answer 3

我想你可能會在列表項結束之前看到圖像后面的空格。 嘗試擺脫html中的空白，如下所示：

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

Answer 4

如果你在img元素上強制填充邊距和邊框為0怎么辦？ 你在使用Firebug嗎？

Answer 5

您可以提供一個或多個代碼以便更好地解決問題，但是：

1.驗證您的圖像是否為imp標記中的60px x 60px設置

2.從你的img中刪除填充和邊距以及邊框，你可能有一個img標簽的默認設置會導致你的裁判

3.你的img下面的額外空間可能來自你頁面中的其他元素，這意味着在img到位的情況下，一些元素會強加額外的空間