为什么我的图片链接的页边空白可以点击？答案

【问题标题】：Why is the margin space of my image link clickable?为什么我的图片链接的页边空白可以点击？
【发布时间】：2014-02-07 00:41:08
【问题描述】：

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

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

这是我的小提琴：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;*/
}

对我来说奇怪的是，在这个答案中：Remove space around clickable image 答案是使用边距而不是填充

【问题讨论】：

标签： html css

【解决方案1】：

这是因为您在 a 标记内使用 display: block 有一个 img，这是内联的。

将width: 60% 和margin: 0 auto; 移动到带有display: block 的a 标记，并将width: 100% 添加到img

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

【讨论】：

对我来说同样的问题。而且我不知道图像的宽度。所以这个解决方案不起作用。有什么帮助吗？
发布一个新问题

【解决方案2】：

这是因为您已将图像设置为显示为块元素（我假设您这样做是为了居中）。如果您删除 display: block 行并为 #home div 添加一个部分，如下所示： #home { text-align: center; }

它应该适合您，并且边距不会“可点击”

【讨论】：

我也喜欢这个答案，我刚刚发现第一个关于为什么 display: block 做了它所做的事情的更多信息

【解决方案3】：

我通过将<a> 元素的parent div 设置为text-align: center 并将<img> 设置为display: inline 解决了这个问题。

.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 
}

【讨论】：