X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-08-20
  • 1777 просмотр

    0 комментарий

  • Дизайн и разработка сайта

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

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

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

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

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



Пример

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

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

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

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

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

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 7, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.