title: Why is the margin space of my image link clickable?
body: <p>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.</p>
  
  <p>I'm assuming that it has to do with the image being inside of a div?</p>
  
  <p>Here is my jfiddle: <a href="http://jsfiddle.net/9kSL3/5/" rel="noreferrer">http://jsfiddle.net/9kSL3/5/</a></p>
  
  <p>Here are the areas of interest:</p>
  
  <pre><code>&lt;div id="home"&gt;
  &lt;a href="./images/home3.jpg"&gt;&lt;img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  
  
  #home img{
      width: 60%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      /*border-radius: 15px;
      border: 1px;*/
  }
  </code></pre>
  
  <p>What's strange to me is that in this answer: <a href="https://stackoverflow.com/questions/15843744/remove-space-around-clickable-image">Remove space around clickable image</a> the answer is to use margin instead of padding</p>