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

Question

I have a series of images that all have padding and are linkable to different sites. My problem is that I don't want the padding itself to be clickable, just the image.

Here's the padding for the images:

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

And here's an example of what the slideshow looks like:

<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

Wrap your <a> elements with some placeholder element (<span> for example) and set the padding on that.

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