CSS/HTML: Фотогалерея Миниатюры меньше, чем гиперссылка

Я создаю фотогалерею в HTML и добавляю пространство между эскизами с CSS. Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на уменьшенное изображение, гиперссылка тега «a» висит ниже, сверху или сбоку изображения в зависимости от полей или отступов. Как я могу избавиться от этого и иметь гиперссылку в пределах только уменьшенного изображения?CSS/HTML: Фотогалерея Миниатюры меньше, чем гиперссылка

HTML

<html> 
    <head> 
    <title>Photo Gallery</title> 
    </head> 
    <body> 
    <div class="gallery"> 
     <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a> 
     <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a> 
     <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a> 
     <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a> 
    </div>  
    </body> 
</html>

CSS

body { 
    margin: 0 auto; 
    background-color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1em; 
    padding: 0; 
    width: 960px; 
} 

img { 
    display: inline-block; 
    margin: 15px; 
    width: 150px; 
    height: 100px; 
}

Спасибо всем. Я закончил тем, что помещал каждое изображение в Div-класс, а затем устанавливал маржу в этом классе, что устраняло проблему!

источник

2013-05-27 Anonymous

установите ваш img на 'display: block;' вместо 'inline-block'. (настроить скрипку, если это не делает трюк) – Pevara

Вы можете удалить прокладку от a и переместить границу с изображения на a. Поскольку a обертывает изображение, а изображение имеет маржу, a также завернут в поле. Если вы на самом деле хотите, чтобы запас на a блоке, так что нажав на него ничего не делает:

.gallery a { margin: 0; padding: 0; } 
img { 
    display: inline-block; 
    width: 150px; 
    height: 100px; 
}

источник

2013-05-27 23:11:43 dave

Добавить стили в теге:

display:inline-block; 
font-size:1px;

Смотрите здесь: http://jsfiddle.net/XRhWe/ Второй объект от оставил.

источник

2013-05-27 23:11:57 WhyMe

CSS/HTML: Фотогалерея Миниатюры меньше, чем гиперссылка

ответ

Смежные вопросы