如何防止图像周围的填充可点击？答案

【问题标题】：How do you prevent the padding surrounding an image from being clickable?如何防止图像周围的填充可点击？
【发布时间】：2015-10-16 06:15:43
【问题描述】：

我有一系列图像，它们都有填充并且可以链接到不同的站点。我的问题是我不希望填充本身是可点击的，只是图像。

这是图像的填充：

.slideshow img {
    padding: 15px 15px 45px;
    border: 1px solid #ccc;
    background-color: #eee;
}

下面是幻灯片的示例：

<div class="slideshow"> 
<a target="window" href="http://google.com"><img src="img/image1.jpg" alt="Here's some alt text." width="960" height="300" /></a>
<a target="window" href="http://www.google.com"><img src="img/image2.jpg" alt="Here is some more alt text." width="960" height="300" /></a>
</div>

【问题讨论】：

标签： html css href padding

【解决方案1】：

问题在于，不仅图像是可点击的，尤其是它周围的链接。因此，为图像添加正常边距也不起作用，因为它只会拉伸链接。

一个简单的方法是在链接周围添加一个额外的元素并将样式添加到该 {upd: like Amit just posted}。但这里有一个不需要您更改 HTML 的替代方案。它基本上为链接本身添加边距，并用与背景颜色相同的阴影填充该边距。

.slideshow a {
  display: inline-block;
  background-color: #eee;
  margin: 15px 15px 45px;
  box-shadow: -0px -0px 0px 15px #eee; 
}

<div class="slideshow">
  <a target="window" href="http://google.com">
    <img src="img/image1.jpg" alt="Here's some alt text." width="960" height="300" />
  </a>
  <a target="window" href="http://www.google.com">
    <img src="img/image2.jpg" alt="Here is some more alt text." width="960" height="300" />
  </a>
</div>

【讨论】：

【解决方案2】：

用一些占位符元素（例如<span>）包装您的<a> 元素并在其上设置填充。

.slideshow span {
  border: 1px solid #ccc;
  padding: 15px 15px 45px;
  background-color: #eee;
  display: inline-block;
}

<div class="slideshow">
  <span><a target="window" href="http://google.com"><img src="img/image1.jpg" alt="Here's some alt text." width="960" height="300" /></a></span>
  <span><a target="window" href="http://www.google.com"><img src="img/image2.jpg" alt="Here is some more alt text." width="960" height="300" /></a></span>
</div>

【讨论】：

【解决方案3】：

似乎填充被解释为内容的一部分。如果可能，我建议您使用“边距”而不是填充。结果几乎（甚至）相同，并且您不会得到那个空白的可点击。

基本上，改变你的 .slideshow 以匹配这个：

.slideshow img {
    margin: 15px 15px 45px;
    border: 1px solid #ccc;
    background-color: #eee;
}

希望对你有帮助

【讨论】：