链接时图像下方的边距答案

【问题标题】：Margin underneath image when linked链接时图像下方的边距
【发布时间】：2012-03-01 20:45:50
【问题描述】：

我到处找，找不到答案，我想可能是因为没有人遇到过同样的问题，也可能是因为这是一个非常具体的问题。

我遇到的问题是，我正在处理的网站上的链接图像在悬停时下方有一个小边框，这是在所有浏览器中（除了 IE 7，该网站最初是在)。这是由于将 a:hover 设置为具有背景。尽管没有为图像设置边框、边距和内边距，但由于某种原因它仍然不满意。

我只有两种方法来解决它，在某些标签上设置一个没有背景的类，或者将链接的图像显示为一个块。不幸的是，这两种解决方案都不合适，因为该站点有数百个页面，并且可能有数千个链接图像，使用一个类意味着找到它们！使用显示块会破坏图像的某些显示，例如当它们在 p 标签中很好地居中时。

如果你想要一个不适合我的例子，该网站的主页是http://www.tameside.gov.uk，看看右上角的社交媒体图标，它们都得到了背景悬停处理。

如果有人能提供帮助，我将不胜感激。

谢谢，

【问题讨论】：

【解决方案1】：

图像图标是 PNG 并且具有透明背景。这就是为什么你可以看到背景。您可以将图标更改为具有白色背景（与 JPEG 相同），您将不再看到背景。

更快的解决方法是添加仅适用于社交媒体 div 内的 a 标签的新 CSS 规则：

.banner_container .social a {
    background: none !important;
}

【讨论】：

您好，感谢您的回复，但它们实际上并不透明，它们有白色背景，它也出现在所有 jpeg 上。然而，经过大量搜索和一些我自己的知识，我弄清楚了问题发生的原因和解决方案。
嗨。我很高兴你修好了。解决方案是什么？
抱歉，本意是提出解决方案，但点击了提早提交：默认情况下，所有图像都是内联的，因此它们位于 div 内的假想线上，或者无论它们在哪里，线都在那里，因为较低的项目自然位于一条线以下，例如大多数字体中的“g”。因为 a:hover 有背景，所以它会选择那条线并在下面创建一个边距。解决方案是将所有图像显示为一个块（这对我不起作用），或者添加vertical-align：text-bottom，这几乎不会改变图像的对齐方式，但将其放置到足以与该假想线重叠。