между div и картинкой(внизу) полоса
Подробно о полосе между div и картинкой(внизу)
- Описание полосы между div и картинкой(внизу)
- Как убрать полосу между div и картинкой(внизу)
- Как убрать полосу между div и картинкой(внизу)2
Описание полосы между div и картинкой(внизу)
С самого начала давайте посмотрим на эту "полосу между div и картинкой(внизу" для этого нам понадобится:Тег div добавим атрибут class.
Внутрь добавим img + src и адрес картинки:
Соберем наш див:
Далее в стилях добавим нашему классу div border, остальные стили нас не интересуют:
.div {
border: 1px solid;
width: 70%;
margin: auto;
}
</style>
Выведем наш пример:
Пример с полосой между div и картинкой(внизу)
Как видим на живом примере... у анс просматривается полоса между "бордюром" div и img :

Как убрать полосу между div и картинкой(внизу)
Выше приведенном пример Вы увидели нашу полосу... разберемся:
В чем причина данной полосы?

Здесь встречаются два элемента разного "display":
Другими словами "img" можно сравнить с текстом, что текст по умолчанию выравнивается по базовой линии, оставляя пустое пространство под выносной элемент (например нижняя чать букв
Изменяем правило выравнивания (vertical-align) на top, добавим в стили наш новый класс:
<style>
.vertical_align_top img {
vertical-align: top;
}
</style>
И добавим его в тег:
Смотрим результат удаления полосы:

Как убрать полосу между div и картинкой(внизу)2
Рассмотрим следующий способ убрать полосу между картинкой и div:
Возвращаемся к нашей картинке? у нас она опять с полоской...:

Второй пример удаления полосы:
Сделаем оба блока "block" для этого создадим новый класс:
<style>
.block img {
display: block;
}
</style>
И добавим его в тег:
Смотрим результат удаления полосы:


подробнее.
подробнее.