Why is the margin space of my image link clickable?

Question

I am building a website for a friend, and part of his specification is that images should include links to view the image in a higher resolution. I enclosed the home image in an anchortag within a div, but I can't figure out why my image's margin space is clickable. I'm assuming that it has to do with the image being inside of a div? Here is my jfiddle: http://jsfiddle.net/9kSL3/5/ Here are the areas of interest: ```

#home img{ width: 60%; display: block; margin-left: auto; margin-right: auto; /*border-radius: 15px; border: 1px;*/ } ``` What's strange to me is that in this answer: Remove space around clickable image the answer is to use margin instead of padding

Accepted Answer

It's because you have an `img` using `display: block` inside an `a` tag, which is inline.

Move the `width: 60%` and `margin: 0 auto;` to the `a` tag with `display: block` and add `width: 100%` to `img`

Example: http://jsfiddle.net/9kSL3/6/

Why is the margin space of my image link clickable?

Solution

Problem