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

我在获取内部图像的链接元素上的额外填充时出现问题。它发生在所有浏览器，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

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

回答

相关问题