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

Posted 2023-03-05

【中文标题】链接图像的额外填充（在每个浏览器中）

【英文标题】：Extra padding on linked images (in every browser)

【发布时间】：2011-04-01 18:20:45

【问题描述】：

我在链接元素上获得额外填充时遇到问题，其中包含图像。它发生在所有浏览器中，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;

【问题讨论】：

希望看到您用于 CSS 背景图像的这些图像。在您的示例中，您似乎明确地将 11px 填充放在 .movi​​e 的底部，所以如果您的阴影图像没有对齐，也许您的阴影小于 11px？

【参考方案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;

【讨论】：

我遇到了同样的问题并将其添加到父 div 并且它工作，我正在使用 html5 Doctype，这个问题突然开始出现

【参考方案2】：

很抱歉在 3 年后回答这个问题，但是这个页面在第一个谷歌页面上，我觉得有责任...... 答：只在tag内的img标签中添加"vertical-align: top;"。

【讨论】：

这很好用。事实上，“中间”或“底部”也可以作为垂直对齐，只要它不是“基线”。 'baseline' 为下降元素（例如 y 的尾部）保留了元素下方的一些空间，这可能最终成为不需要的“填充”。

【参考方案3】：

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

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

【讨论】：

事实并非如此。填充是阴影所在的位置 - 它与阴影图像的高度完全相同，因此这不是导致问题的原因。额外的填充应用于a 元素，而不是其他任何东西。

【参考方案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 来测试它，看看是否有任何变化。

【讨论】：

是的，我也尝试过重置填充。 a:visited 也不起作用。奇怪的是，我还记得以前的一些项目中的相同问题。

【参考方案5】：

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

【参考方案6】：

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

Image inside div has extra space below the image

【参考方案7】：

添加 style="padding:0px;"为我解决了问题。