修复带内边距的图片链接的负边距

这是一个非常基本的技巧，对你们中的许多人来说都很明显。但由于某种原因，它的解决方案一直困扰着我，所以我在这里分享它。我喜欢带内边距的链接。您在正文内容中给链接加上一些内边距、背景和圆角。

a {
  padding: 2px 6px;
  background: #eee;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

问题是，当您将图片设为链接时，这种内边距会以笨拙的方式显示。

错误的修复方法

我过去一直使用大锤而不是凿子来解决这个问题。也就是说，我写了一些 jQuery 来删除这些图片的内边距。

$("a:has('img')").css(padding, 0);

我之所以这样做是因为 jQuery 有 .has() 函数，它能够查看元素是否包含另一个元素，而 CSS 则缺乏这种功能。如果我们能在 CSS 中做到这一点就好了……

a:contains img { padding: 0; }

……但我们做不到。另一种方法是在所有包含图片的链接中添加一个类，例如class="imageLink"。我对这种语义没有任何问题，但它不像我想要的那么具有未来兼容性。也许网站的未来设计不使用带内边距的链接，现在所有这些旧链接都拥有一个不需要的类名。

简单的方法

事实证明，处理此问题的简单方法是在内部图片上应用一些负水平边距。

a img { margin: 0 -6px; }

这会将多余的内边距从外部拉开，留下一个干净的、没有凸起的图片。

查看演示

请注意，在演示中，我使用了一个类来解决问题，这正是我上面告诉您不要做的事情。这只是为了演示目的，因为我想要一个有问题的图片和一个在同一页面上修复后的图片。