Между div и картинкой(внизу) полоса

"между div и картинкой полоса". Встречали ли вы такую проблемку, что между div и картинкой(внизу) полоса и как её убрать?

Подробно о полосе между div и картинкой(внизу)

1. Описание полосы между div и картинкой(внизу)
2. Как убрать полосу между div и картинкой(внизу)
3. Как убрать полосу между div и картинкой(внизу)2

Описание полосы между div и картинкой(внизу)

С самого начала давайте посмотрим на эту "полосу между div и картинкой(внизу" для этого нам понадобится:

Тег div добавим атрибут class.

Внутрь добавим img + src и адрес картинки:

https://dwweb.ru/_data/img/background/evening.png

Соберем наш див:

<div class=div><img src="https://dwweb.ru/_data/img/background/evening.png"></div>

Далее в стилях добавим нашему классу div border, остальные стили нас не интересуют:

Выведем наш пример:

Пример с полосой между div и картинкой(внизу)

Как видим на живом примере... у анс просматривается полоса между "бордюром" div и img :





Как убрать полосу между div и картинкой(внизу)

Выше приведенном пример Вы увидели нашу полосу... разберемся:

В чем причина данной полосы?



Здесь встречаются два элемента разного "display":

div - это block

img - inline

Другими словами "img" можно сравнить с текстом, что текст по умолчанию выравнивается по базовой линии, оставляя пустое пространство под выносной элемент (например нижняя чать букв р, д, y и т.д.).

Один из способов решения:

Изменяем правило выравнивания (vertical-align) на top, добавим в стили наш новый класс:

<style>
.vertical_align_top img {
vertical-align: top;
}
</style>

И добавим его в тег:

<div class="div vertical_align_top"><img src="https://dwweb.ru/_data/img/background/evening.png"></div>

Смотрим результат удаления полосы:





Как убрать полосу между div и картинкой(внизу)2

Рассмотрим следующий способ убрать полосу между картинкой и div:

Возвращаемся к нашей картинке, у нас она опять с полоской...:



Второй пример удаления полосы:

Сделаем оба блока "block" для этого создадим новый класс:

<style>
.block img {
display: block;
}
</style>

И добавим его в тег:

<div class="div block"><img src="https://dwweb.ru/_data/img/background/evening.png"></div>

Смотрим результат удаления полосы: