Html 为什么我的图像链接的边距空间是可点击的？

我正在为一位朋友建立一个网站，他的部分说明是，图像应该包含链接，以便以更高的分辨率查看图像。我把主图像放在一个div中的一个锚定标签中，但我不明白为什么我的图像的边距空间是可点击的

我假设这与div中的图像有关

这是我的小提琴：

以下是感兴趣的领域：

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

#家庭img{
宽度：60%；
显示：块；
左边距：自动；
右边距：自动；
/*边界半径：15px；
边界：1px*/
}

---

我感到奇怪的是，在这个答案中：答案是使用边距而不是填充

这是因为你有一个

img

使用

display:block

在一个

a

标记内，它是内联的

移动

宽度：60%

和

边距：0自动到
a
标签，带有
display:block
并将
宽度：100%
添加到
img

示例：
这是因为您已将图像设置为显示为块元素（我假设您这样做是为了居中）。如果删除
display:block
行并为#home div添加一个部分，如下所示：
#主页{
文本对齐：居中；
}

它应该适用于您，边距将不可“单击”
我通过将
元素的父级div设置为
文本对齐：居中
，并将
设置为
显示：内联
，解决了此问题

.parent-div-of-your-a-tag {
    text-align: center;

}

.your-img-class-name {
    width: 100%;     // might not be necessary, I needed them for responsive design
    height: auto;    // see above
    display: inline; // necessary 
}   

我也喜欢这个答案，我只是发现第一个答案更能说明为什么display:block做了它为我做的事情。我不知道图像的宽度。所以这个解决方案不起作用。有什么帮助吗？发布一个新问题