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