СКРИПТЫ
ТЕГИ:
php (283)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
atom (20)
online (19)
forum (19)
svg (18)
Показать еще :
board (17)
hosting (17)
html book (16)
php file (16)
js method (16)
input (15)
color (15)
link (15)
php date (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
path (12)
js delete (12)
select (12)
download (11)
img (11)
form (11)
dw block (11)
notepad (11)
icon (11)
php time (11)
keyboard (11)
php img (11)
jsphp (11)
mouse (10)
url (10)
js time (9)
info (9)
yandex (9)
php url (7)
comment (7)
cookie (7)
dosite (7)
hover (7)
task (7)
js url (6)
list (6)
iframe (6)
click (6)
year (6)
mysql (6)
search (5)
ftp (5)
chart (5)
browser (5)
js id (5)
mb (5)
php get (5)
heading (5)
adminka (5)
value (5)
symbols (4)
vk (4)
js form (4)
console (4)
mounth (4)
submit (4)
reg.ru (4)
bbcode (4)
day (4)
week (4)
captcha (3)
js img (3)
ucoz (3)
line (3)
ssl (3)
scandir (3)
pages (3)
js post (3)
https (3)
vs code (3)
padding (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
typeof (2)
seo (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
js vars (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
height (2)
details (2)
archive (1)
numbers (1)
domen (1)
books (1)
куб (1)
scroll (1)
smile (1)
header (1)
windows (1)
google (1)
speed (1)

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

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

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

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

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

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

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

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

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

    <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 и картинкой(внизу)


  2. Как убрать полосу между 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>

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

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


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

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

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

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

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

    Сделаем оба блока "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
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.016677 секунд. Подробнее