錨定標記底部的空白處

我有一個標記圍繞圖像。我在標籤所在的div上設置了一個邊框。我將margin和padding設置爲0，但由於某種原因，我的標籤仍然比我的圖片高出3個像素。這會在圖像和邊框之間留下一些空隙，從而破壞我想要完成的外觀。錨定標記底部的空白處

我在做什麼錯？我已經在FireFox和Chrome中進行了相同的測試。謝謝

2010-07-07 Icode4food

圖像是display: inline所以它被視爲一個字符，坐在基線上。這個差距是由下行提供的空間造成的（你可以在字母j，g，y和p上找到）。

調整vertical-align與CSS：img{vertical-align: bottom}

2010-07-07 18:13:55 Quentin

+10

更確切地說，'img {vertical-align：bottom}' – 2010-07-07 18:17:29

這正是發生的情況。如果我使用'vertical-align：bottom;'或'display：block;'，問題就解決了。哪個更好的解決方案？ – Icode4food 2010-07-07 18:18:20

兩者都不是更好，他們只是有不同的含義。塊元素具有突破他們和其他有趣的副作用。 – Quentin 2010-07-07 18:38:23

display:block是足夠的，如果元素沒有兄弟姐妹。

2010-07-07 18:20:10

有趣的是，真正的罪魁禍首是圖像標籤，而不是標籤。 – Icode4food 2010-07-07 18:28:07

這就是大衛所說的，任何內聯元素都有下行空間。這是自然的行爲。 – 2010-07-07 18:29:37

「vertical-align：bottom」和「display：block」都會刪除底部的「額外空白」 – aztack 2014-10-31 07:53:47

回答