Как убрать отступ внизу изображения?

Неприятность заключается в том, что при верстке, Вы добавляете картинку, например в блок и под картинкой появляется непонятный отступ. Многие не раз замечали данный баг и пытались найти решение. Раньше, данную проблему решали методом подмены Doctype, но это было в далеких годах до того как придумали HTML 5. Теперь же Doctype один и подменять его уже не нужно. Что же делать теперь?

Ниже приведен пример, где одна и та же картинка просто добавлена и внизу видно оранжевую полосу, которая и отображает отступ. И вторая картинка, где отступа нет. Картинки помещены в родительский блок, который окрашен в оранжевый цвет и как следствие, в первом блоке отступ видно, а во втором нет. Ко второй картинке мы применили одно из решений о которых я расскажу немного ниже.

Если углубится в азы, то Вы узнаете, что картинка, которую Вы подключаете с помощью тега IMG это inline-элемент, то есть строчный. В следствии этого предлагаю два решения в зависимости от нужд.

Первое решение, это просто прописать для IMG свойство display:block;, тем самым сделав его блочным, что избавит от отступа. Второй вариант подойдет, когда Вам нужно оставить картинку строчным элементом, но все же избавится от отступа. Вам нужно прописать свойство vertical-align:top;. Таким образом Вы выровняете элемент по верхней границе и отступ снизу также пропадет.

Таким образом, мы решили небольшую проблемку, которая может возникнуть у новичков при верстке.

На этом все, спасибо за внимание. 🙂