phpjsJqueryhtmlcssblog

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

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

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

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

Скопировать ссылку



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

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


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

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

https://dwweb.ru/__img/php/img_php/evening.png

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

<div class=div><img src="https://dwweb.ru/__img/php/img_php/evening.png"></div>

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

<style>
.div {
border: 1px solid;
width: 70%;
margin: auto;
}
</style>


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

Пример с полосой между 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/__img/php/img_php/evening.png"></div>

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


Скопировать ссылку



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

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

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



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

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

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


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

<div class="div block"><img src="https://dwweb.ru/__img/php/img_php/evening.png"></div>

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---