为什么我的图片链接的边距空间可点击？ [英] Why is the margin space of my image link clickable?

问题描述

我正在为朋友建立网站，他的规范的一部分是图片应该包含以更高分辨率查看图片的链接。我把home图片放在一个div中的一个anchortag中，但我不知道为什么我的图片的margin是可以点击的。

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.

我假设它

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

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

在此答案中：删除可点击图片周围的空间，答案是使用边距而不是填充

What's strange to me is that in this answer: Remove space around clickable image the answer is to use margin instead of padding

推荐答案

这是因为您有 img 使用

It's because you have an img using display: block inside an a tag, which is inline.

将

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

这篇关于为什么我的图片链接的边距空间可点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！