Швидке виправлення:
Щоб видалити проміжок під зображенням , можна:
- Встановіть властивість вертикального вирівнювання зображення на
vertical-align: bottom;
vertical-align: top;
абоvertical-align: middle;
- Встановіть властивість відображення зображення на
display:block;
Дивіться наступний код для демонстрації в прямому ефірі:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Пояснення: чому під зображенням є пробіл?
Розрив або додатковий простір під зображенням не є помилкою або проблемою, це поведінка за замовчуванням. Першопричиною є те, що зображення замінені елементами ( див. Замінені MDN елементи ). Це дозволяє їм "діяти як зображення" та мати власні внутрішні розміри, співвідношення сторін ....
Веб-браузери обчислюють їх властивість відображення, inline
але вони надають їм особливу поведінку, яка робить їх ближчими до inline-block
елементів (як ви можете вертикально вирівняти їх, надайте їх висота, верхній / нижній запас і підкладка, перетворення ...).
Це також означає, що:
<img>
не має базової лінії, тому коли зображення використовуються в контексті вбудованого форматування з вертикальним вирівнюванням: базова лінія, нижня частина зображення буде розміщена на текстовій базовій лінії.
( Джерело: MDN , моє наголос )
Оскільки браузери за замовчуванням обчислюють властивість вертикального вирівнювання до базової лінії, така поведінка за замовчуванням. На наступному зображенні показано, де знаходиться базовий рядок у тексті:
( Джерело зображення )
Елементи, що вирівнюються за базовою лінією, повинні забезпечити простір для спусків, що простягаються нижче базової лінії (як j, p, g ...
), як ви бачите на зображенні, що подано вище. У цій конфігурації нижня частина зображення вирівнюється по базовій лінії, як ви бачите в цьому прикладі:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
Ось чому поведінка <img>
тегу за замовчуванням створює пробіл у нижній частині контейнера, і чому зміна властивості вертикального вирівнювання або властивості відображення видаляє його, як у наступній демонстрації:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>