Между div и картинкой(внизу) полоса
"между div и картинкой полоса". Встречали ли вы такую проблемку, что между div и картинкой(внизу) полоса и как её убрать?
Подробно о полосе между div и картинкой(внизу)
- Описание полосы между div и картинкой(внизу)
- Как убрать полосу между div и картинкой(внизу)
- Как убрать полосу между div и картинкой(внизу)2
Описание полосы между div и картинкой(внизу)
С самого начала давайте посмотрим на эту "полосу между div и картинкой(внизу" для этого нам понадобится:
Тег div добавим атрибут class.
Внутрь добавим img + src и адрес картинки:
Соберем наш див:
Далее в стилях добавим нашему классу div border, остальные стили нас не интересуют:
Выведем наш пример:
Пример с полосой между 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>
И добавим его в тег:
Смотрим результат удаления полосы:

Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: