Почему пространство с краем моей ссылки на изображение можно использовать?

Question

Я создаю сайт для друга, и часть его спецификации заключается в том, что изображения должны включать ссылки для просмотра изображения в более высоком разрешении. Я приложил домашний образ в анкодаге внутри div, но я не могу понять, почему пространство маржи моего изображения доступно для кликов.

Я предполагаю, что это связано с тем, что изображение находится внутри 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> элемент 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 
}