Почему появляется отступ?

Question

[TanyaVojt]

Делаю адаптивную галерею, при наведении на картинку она красиво зумится и меняет прозрачность. Для достижения такого эффекта я оборачиваю каждый img в блочный элемент с overflow: hidden; и нужным бэкграундом. Проблема в том, что сразу картинка не запоолняет собой полностью родительский элемент (снизу остаются 3px), а только при ховере. Вот скрин, ховер в центре
Если задать статическую высоту родителя, то все хорошо. Можно ли как-то решить эту проблему без задания статическй высоты?

Comments

[Cyapa]

На код бы взглянуть, для начала.

Answer 1

[ModestesGonze]

Добавьте display: block; для img
Это такое поведение тега img, он по умолчанию строчный элемент и выравнивается по базовой линии текста, поэтому появляется такой отступ. Это так сказать зарезервированное место для "хвостиков" у букв.

Answer 2

[skyfortress]

попробуй img прописать vertical-align:bottom

Answer 3

[aen]

Добавьте картинке display: block и будет вам счастье.