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

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

Я предполагаю, что это связано с тем, что изображение находится внутри div?

Вот мой jfiddle: http://jsfiddle.net/9kSL3/5/

Вот интересующие нас области:

home3
#home img{ width: 60%; display: block; margin-left: auto; margin-right: auto; /*border-radius: 15px; border: 1px;*/ }

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

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

Переместить width: 60% и margin: 0 auto; к тегу с display: block и width: 100% добавления width: 100% к img

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

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

Он должен работать для вас, и поля не будут «кликабельными»,

Я решил эту проблему, установив родительский div элемента в text-align: center и для 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 }