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

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

Answer 1

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

使用width: 60%将margin: 0 auto;和a移至display: block标记，并将width: 100%添加到img

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

Answer 2

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

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

Answer 3

我通过将<a>元素的父 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 
}

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

3 个答案: