Why is the margin space of my image link clickable?

Question

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.

I'm assuming that it has to do with the image being inside of a div?

Here is my jfiddle: http://jsfiddle.net/9kSL3/5/

Here are the areas of interest:

<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

score 26 · Accepted Answer · edited May 04 '16 at 16:01

26

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

Move the width: 60% and margin: 0 auto; to the a tag with display: block and add width: 100% to img

Example: http://jsfiddle.net/9kSL3/6/

edited May 04 '16 at 16:01

Community

1
1

answered Feb 07 '14 at 00:45

TimCodes.NET

4,601
1
25
36

Same issue for me. And I dont know the width of the image. So this solution is not working. Any help? – Stanly Jul 26 '17 at 10:24
post a new question – TimCodes.NET Jul 29 '17 at 08:05

score 3 · Answer 2 · answered Feb 07 '14 at 00:58

3

It's because you've set the image to display as a block element (I assume you did this for centering). If you remove the display: block line and add a section for the #home div as so: #home { text-align: center; }

It should work for you and the margins will not be "clickable"

answered Feb 07 '14 at 00:58

nagyben

938
1
10
19

1

I liked this answer as well, I just found the first more informative as to why display: block did what it did – user2464083 Feb 07 '14 at 01:18

score 1 · Answer 3 · answered Aug 12 '16 at 21:04

I solved this issue by setting the parent div of the <a> element to text-align: center and the <img> to 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 
}

Why is the margin space of my image link clickable?

3 Answers3

Linked