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 i

Answer 1

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"

Answer 2

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/

Answer 3

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 
}