Задать вопрос
TanyaVojt
@TanyaVojt

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

Делаю адаптивную галерею, при наведении на картинку она красиво зумится и меняет прозрачность. Для достижения такого эффекта я оборачиваю каждый img в блочный элемент с overflow: hidden; и нужным бэкграундом. Проблема в том, что сразу картинка не запоолняет собой полностью родительский элемент (снизу остаются 3px), а только при ховере. Вот скрин, ховер в центре 63d8b34564254a52bd05c94d6aafe3d4.png
Если задать статическую высоту родителя, то все хорошо. Можно ли как-то решить эту проблему без задания статическй высоты?
  • Вопрос задан
  • 2251 просмотр
Подписаться 2 Оценить 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
@ModestesGonze
Добавьте display: block; для img
Это такое поведение тега img, он по умолчанию строчный элемент и выравнивается по базовой линии текста, поэтому появляется такой отступ. Это так сказать зарезервированное место для "хвостиков" у букв.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@skyfortress
попробуй img прописать vertical-align:bottom
Ответ написан
Комментировать
aen
@aen
Keep calm and 'use strict';
Добавьте картинке display: block и будет вам счастье.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы