Главная
Web-дизайн
Как убрать отступ внизу изображения?

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

Отступ изображение картинка

Доброго времени суток 🙂

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

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

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



Пример

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий