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

Question

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

这是图像的填充：

.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>

Answer 1

问题是，不仅图像是可点击的，而且图像周围的 link 尤其如此。因此，向图像添加正常边距也不起作用，因为它只会拉伸 link.

一个简单的方法是在 link 周围添加一个额外的元素，并向该元素添加样式{upd：就像 Amit 刚刚发布的那样}。但这里有一个替代方案，不需要您更改 HTML。它基本上为 link 本身添加了边距，并用与背景颜色相同颜色的阴影填充该边距。

.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>

Answer 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>

Answer 3

padding好像被解释为内容的一部分。如果可能，我建议您使用 'margin' 而不是填充。结果几乎（甚至）相同，并且您不会获得可点击的空白。

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

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

希望对您有所帮助

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

How do you prevent the padding surrounding an image from being clickable?

html

css

href

padding