为什么我的图片链接的边距空间可以点击？

Question

我正在为朋友建立一个网站,他的部分规范是图像应该包含以更高分辨率查看图像的链接.我将主图像包含在div中的一个anchortag中,但我无法弄清楚为什么我的图像的边距空间是可点击的.

我假设它与div内部的图像有关？

这是我的jfiddle:http://jsfiddle.net/9kSL3/5/

以下是感兴趣的领域:

<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;*/
}

对我来说很奇怪的是,在这个答案中:删除可点击图像周围的空间,答案是使用边距而不是填充

Answer 1

这是因为你在标签内部img使用了display: block内a联.

将width: 60%and 移动margin: 0 auto;到a标签display: block并添加width: 100%到img

示例:http://jsfiddle.net/9kSL3/6/