nastya97core
@nastya97core
Начинающий программист

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

Здравствуйте. Нужно сделать, чтобы изображение было
img {
   max-height: 50vw;
   max-width: 70vw;
}

однако, почему-то (чутьё подсказывает, что виновен picture) внизу появляется отступ в несколько пикселей
https://jsfiddle.net/uhq39y0f/

По моей логике: нужно выдать параметры img самому picture, а для img сделать height 100%, НО ТАК ПОЧЕМУ-ТО НЕ РАБОТАЕТ!
  • Вопрос задан
  • 271 просмотр
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@Pavel-ww
Здравствуйте. Виновен не picture, а стандартные стили браузера, которые обычно сбрасываются с помощью normalize.css.
Сброс стилей браузера для img решит проблему.
img {
    vertical-align: middle;
}

display: block; для img тоже сработает, но это костыль в данном контексте. Вдруг вам где-то дальше не нужен будет display: block; , тогда придется его постоянно сбрасывать.
6118e5b7c9bfc586856256.jpeg
Всегда подключайте normalize.css чтобы не бороться с приведениями браузерных стилей
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы