鏈接圖像上的額外填充（在每個瀏覽器中）

我在獲取內部圖像的鏈接元素上的額外填充時出現問題。它發生在所有瀏覽器，Safari，Firefox，IE中。

我有一個重置樣式表應用，所以不應該有任何額外的邊距上的填充，但經過檢查，很明顯，a元素有一些額外的底部填充從無處。有任何想法嗎？

這裏的標記和CSS：

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie { 
padding: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
} 

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
} 

div.home-col .movie img { 
padding: 4px; 
margin: 0; 
border: 1px solid #d0d0d0; 
}

來源

2010-08-20 Justine

希望看到您用於CSS背景圖像的這些圖像。在你的例子中，你似乎明確地將11px填充到了.movie的底部，所以如果你的影子圖像沒有排列，或許你的影子小於11px？ – babtek 2010-08-22 03:29:09

爲電影類將出現在箱子和填充既適用於它的底部，所以使用，如果你下面的背景圖片需要圖像底部的11px空間。

div.home-col .movie { 
margin: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
}

來源

2010-08-20 16:34:45

情況並非如此。填充是影子所在的位置 - 它與陰影圖像完全相同，因此不是導致問題的原因。額外的填充應用於'a'元素，而不是其他任何東西。 – Justine 2010-08-20 18:29:57

你嘗試添加填充到：

div.home-col .movie a { 
display: block; 
padding: 0 0 0 0; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
}

如果沒有可能，你可以添加一個：拜訪，以測試它是否有任何變化。

來源

2010-08-22 03:09:31 Ken

是的，我試過重置填充。 'a：visited'也不起作用。奇怪的是，我還記得以前的一些項目也有同樣的問題。 – Justine 2010-08-23 10:34:07

嘗試添加下面一行到你的鏈接元素：的line-height：0;

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
line-height: 0; 
}

來源

2010-11-02 09:26:36

我有同樣的問題，並將其添加到父div，它的工作，我使用HTML5的文檔類型，這個問題突然開始出現 – 2012-03-09 20:19:24

謝謝你這麼多！ – Nick 2014-04-09 22:19:13

您確定這就是所有的CSS？我看不到你所描述的這個測試頁面上的問題：http://www.pauldwaite.co.uk/test-pages/3532870/

來源

2010-11-02 09:39:02

您好，我有同樣的問題，我發現，如果垂直圖像對準的底部將被固定。

Image inside div has extra space below the image

來源

2012-10-09 23:40:35

添加風格= 「填充：0像素;」爲我解決了這個問題。

來源

2013-03-26 20:32:43 user1270392

對不起回答這個問題3年後，但這個頁面是在第一個谷歌頁面，我感到責任..... 回答：只需添加「vertical-align：top;」到IMG一個標籤內標籤。

來源

2013-12-29 04:41:33 user3051858

謝謝，這是爲我工作的答案。 – Bartvds 2014-08-14 13:00:07

這個效果很好。事實上，「中間」或「底部」也可以作爲垂直對齊，只要它不是「基線」。「基線」爲下邊界元素（例如y的尾部）留出一些空間，最終可能會成爲不需要的「填充」。 – jox 2014-12-28 22:28:08

謝謝你的回答。這很好。 – Raegon 2015-11-25 02:41:32

鏈接圖像上的額外填充（在每個瀏覽器中）

回答

相關問題