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

我遇到了一个问题，在链接元素中添加了额外的填充，里面有一个图像。这在所有浏览器中都会发生，比如Safari、Firefox和IE

我应用了一个重置样式表，所以在填充上不应该有任何额外的边距，但是经过检查，很明显

a

元素不知从哪里来了一些额外的底部填充。有什么想法吗

以下是标记和CSS：

---

movie类的背景图像将显示在框的底部以及应用于它的填充，因此如果需要在图像底部留出11px的空间，请使用以下选项

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

---

您是否尝试将填充添加到：

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

---

如果不可能，您可以添加一个：visited来测试它是否有任何变化。

尝试将以下行添加到链接元素：行高：0

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

---

你确定这就是所有的CSS吗？我看不出您在此测试页上描述的问题：

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

---

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

很抱歉在三年后回答这个问题，但这个页面在第一个谷歌页面中，我感到有责任。。。。。

---

回答：仅在标签内添加“垂直对齐：顶部；”到img标签，情况并非如此。填充是阴影所在的位置-它与阴影图像的高度完全相同，所以这不是问题的原因。额外的填充将应用于

元素，而不是其他任何元素。希望查看这些用于CSS背景图像的图像。在您的示例中，您似乎明确地在.movie的底部添加了11px的填充，因此如果您的阴影图像没有对齐，可能您的阴影小于11px？是的，我也尝试过重置填充<代码>a:已访问

也不起作用。奇怪的是，我还记得以前一些项目中的相同问题。我有相同的问题，并将其添加到父div中，结果成功了，我正在使用HTML5 Doctype，这个问题突然出现了。这很好。事实上，“中间”或“底部”也可以用作垂直对齐，只要它不是“基线”“基线”在元素下方为下行器保留一些空间（例如y的尾部），这可能最终成为不需要的“填充”。

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