Зображення всередині div має додаткове місце під зображенням


502

Чому в наступному коді висота diva більша за висоту img? Під зображенням є пробіл, але він, здається, не є прокладкою / полем.

Який зазор чи додатковий простір під зображенням?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Зображення з пробілом або білим пробілом під ним


10
Ось коротка та повна відповідь на це запитання: stackoverflow.com/a/31445364/3597276
Майкл Бенджамін

1
Ось добре читайте з цього питання: Дивний <img> Розрив у HTML
Matheus Avellar

Відповіді:


600

За замовчуванням зображення відображається в рядку, як літера, щоб воно сиділо на тому ж рядку, на якому сидять a, b, c і d.

Під цим рядком є ​​пробіл для спусків, які ви знайдете на таких літерах, як g, j, p і q.

Демонстрація спусків

Ти можеш:

  • відрегулюйте vertical-alignзображення, щоб розмістити його в іншому місці (наприклад, middle) або
  • змінити, displayщоб воно не було в рядку.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>


Включене зображення є загальнодоступним і отримане з Вікісховища


9
Якщо точніше, це буває, що вбудовані вбудовані елементи займають простір свого струму line-height. Встановлення line-heightпотрібного виміру також подолає небажаний пробіл.
Кевін Баучер

3
Чи "f" кваліфікується як спадний?
j08691

2
@ j08691 - Залежить від шрифту.
Квентін

134

Ще один варіант, запропонований тут, - це встановити стиль зображення якstyle="display: block;"


4
Дякую. Це також вирішило подібну проблему з місцем під флеш-фільмом. (додано дисплей: блок для вставки / теги об'єкта)
jessieloo

5
або inline-blockякщо ви все ще хочете, щоб він відображався в рядку, як це зазвичай роблять зображення.
Ян

6
@Ian @Imperative inline-block, здається, не працює.
p.matsinopoulos

93

Швидке виправлення:

Щоб видалити проміжок під зображенням , можна:

  • Встановіть властивість вертикального вирівнювання зображення на vertical-align: bottom; vertical-align: top;абоvertical-align: middle;
  • Встановіть властивість відображення зображення на display:block;

Дивіться наступний код для демонстрації в прямому ефірі:


Пояснення: чому під зображенням є пробіл?

Розрив або додатковий простір під зображенням не є помилкою або проблемою, це поведінка за замовчуванням. Першопричиною є те, що зображення замінені елементами ( див. Замінені 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>


Отже, встановлення розміру шрифту на 0 не працює. чи це?
Персінь

2
@Persijn це робить. Як налаштування, line-height:0;але я не вважаю це гарним рішенням порівняно зі зміною властивостей вертикальної вирівнювання або відображення
web-tiki

2
Однак зауважте, що деякі веб-переглядачі не дотримуються font-size:0: вони встановлюють розмір шрифту мінімальним розміром у налаштуваннях користувача.
Містер Лістер

Так, це здається білим простором.
mrbengi

ну, я думаю, що middle text-top sub superпозиція на малюнку не є правильною.
xianshenglu

40

Ви також можете звести нанівець висоту батьківської лінії:

#wrapper {
  line-height: 0;
}

Усі виправлення: http://jsfiddle.net/FaPFv/


5
УВАГА! це також знищить будь-які текстові вузли в #wrapper. як це буде успадковано. Але бонусні бали за цього дивовижного шахрая! тут він оновлюється текстовими вузлами. jsfiddle.net/FaPFv/30
gcb

Крім того, розмір шрифту: 0
Кіран

13

Все, що вам потрібно зробити, це призначити цю властивість:

img {
    display: block;
}

За замовчуванням зображення мають це властивість:

img {
    display: inline;
}

7

Ви можете використовувати декілька методів для подібного питання

  1. Використання line-height

    #wrapper {  line-height: 0px;  }
  2. Використання display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
  3. Використовуючи display: block, table, flexіinherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }

Будь ласка, не рекомендуйте дуже неохайний line-heightхак, або принаймні уточнюйте, чому це найгірше "рішення" з них усіх: в момент, коли хтось розміщує текст поруч із зображенням (особливо попередньо відформатований багаторядковий з тегами BR), вони опиняться в гіршій ситуації, ніж вони почали.
Sz.

5

Я використав, line-height:0і це прекрасно працює для мене.


Вибачте, -1: це викручує позиціонування тексту, тож якщо хтось також розмістить <BR>поруч із зображенням якийсь (наприклад, багаторядковий, скажімо, з ) текст, у них з’явиться неправильне розташування, перекриття / перекриття.
Sz.

3

Я виявив, що це чудово працює за допомогою display: block; на зображенні та вертикальне вирівнювання: вгорі; на текст.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

або ви можете редагувати код JS FIDDLE


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.