链接图像上的额外填充（在每个浏览器中）

Question

我遇到了在链接元素上添加额外填充内部图像的问题。它发生在所有浏览器中，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;
}

Answer 1

尝试在链接元素中添加以下行： line-height：0;

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

Answer 2

很抱歉3年后回答这个问题，但这个页面是在第一个谷歌页面，我觉得有责任..... 回答：只在标记中添加“vertical-align：top;”到 img 标记。

Answer 3

电影类的背景图像将显示在应用于它的框和填充的底部，因此如果您需要图像底部的11px空间，请使用以下内容。

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

Answer 4

您是否尝试添加填充：

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

如果不可能，您可以添加：visited来测试它以查看是否有任何更改。

Answer 5

你确定这是所有的CSS吗？我无法在此测试页面上看到您所描述的问题：http://www.pauldwaite.co.uk/test-pages/3532870/

Answer 6

您好我遇到了同样的问题，我发现如果您将图像垂直对齐到底部，它将被修复。

Image inside div has extra space below the image

Answer 7

添加style =“padding：0px;”为我解决了这个问题。