Тег img по умолчанию считается строчным — то есть ведёт себя как слово в строке текста. В этом легко убедиться, положив маленькую картинку внутрь абзаца:
Выглядит странно, но такой уж ЦСС нам достался.
Присмотримся. Самые проницательные читатели наверняка уже догадались, откуда берётся загадочный отступ у img.
Строчные теги ведут себя как слова в тексте, у текста есть интерлиньяж и базовая линия. А под базовой линией — пространство для нижних выносных элементов символов. Например, для букв ф, р, у.
Строчный img уважает базовую линию и оставляет пространство снизу для выносных элементов, которых у него, конечно, быть не может. Причём это поведение сохраняется даже если вынуть img из абзаца:
Чтобы убрать отступ, задайте картинке display: block; или другое не строчное значение. Обычно это делают сразу для всех картинок на сайте, потому что строчные картинки бывают нужны крайне редко.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.