Изображение внутри div имеет дополнительное пространство под изображением

Почему в следующем коде высота divбольше, чем высота img? Под изображением есть пробел, но он не является отступом / полем.

Что такое зазор или дополнительное пространство под изображением?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

По умолчанию изображение отображается встроенным, как буква, поэтому оно располагается на той же строке, что и 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>

Включенное изображение является общественным достоянием и получено из Wikimedia Commons

Другой вариант, предлагаемый здесь, это установка стиля изображения какstyle="display: block;"

Быстрая починка:

Чтобы удалить пробел под изображением , вы можете:

• Установите для свойства вертикального выравнивания изображения значение 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>

Можно также обнулить высоту строки родителя:

#wrapper {
  line-height: 0;
}

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

Все, что вам нужно сделать, это назначить это свойство:

img {
    display: block;
}

Изображения по умолчанию имеют это свойство:

img {
    display: inline;
}

Вы можете использовать несколько методов для этой проблемы, как

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:0и это прекрасно работает для меня.

Я нашел, что это прекрасно работает с использованием 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

Я только добавил float:leftв div, и это сработало