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:

<div id="home"> <a href="./images/home3.jpg"><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a> </div>    #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

Answer 1

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/