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

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

一个简单的方法是在链接周围添加一个额外的元素，并将样式添加到{upd：像Amit刚发布}。但是这里有一个替代方案，不需要您更改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>

Answer 2

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

.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

看起来填充被解释为内容的一部分。如果可能的话，我建议你使用'margin'而不是padding。结果差不多（甚至）相同，你不会得到那个空白点击。

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

O(n)

希望这有帮助

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

3 个答案: