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

Я создаю сайт для друга, и часть его спецификации заключается в том, что изображения должны включать ссылки для просмотра изображения в более высоком разрешении. Я приложил домашний образ в анкертаге внутри 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;*/
}

Что странно для меня в этом ответе: Удалить пространство вокруг кликабельного изображения, ответ заключается в использовании поля вместо заполнения

Ответ 1

Это потому, что у вас есть img с помощью display: block внутри тега a, который является встроенным.

Переместите теги width: 60% и margin: 0 auto; в тег a с помощью display: block и добавьте width: 100% в img

Пример: http://jsfiddle.net/9kSL3/6/

Ответ 2

Это потому, что вы установили изображение в качестве элемента блока (я полагаю, вы сделали это для центрирования). Если вы удалите строку display: block и добавьте раздел для div #home: #home { text-align: center; }

Он должен работать для вас, и поля не будут "clickable"

Ответ 3

Я решил эту проблему, установив parent div элемента <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 
}