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

еще один вариант предложил здесь устанавливает стиль изображения как 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 и W3C). Это позволяет им "действовать как изображение" и иметь свои собственные внутренние размеры, соотношение сторон....
Браузеры вычисляют свое свойство отображения в inline но они дают им особое поведение, которое делает их ближе к inline-block элементы (как вы можете по вертикали выровняйте их, дайте им высоту, верхний/нижний край и заполнение, преобразования ...).

это также означает, что:

[...] когда изображения используются во встроенном контексте форматирования с помощью вертикальное выравнивание: базовая линия,нижняя часть изображения будет размещена на базовый уровень контейнера. (источник: MDN, выделено мной)

как браузеры по умолчанию вычисляют свойство вертикального выравнивания базовая линия, это поведение по умолчанию. На следующем рисунке показано, где находится базовая линия в тексте:

базовые выровненные элементы должны сохранять пространство для подстрочных, которые простираются ниже базовой линии (например,j, p, g ...) как вы можете видеть на изображении выше. В этой конфигурации нижняя часть изображения выровнена по базовой линии как вы можете видеть в этом пример:

div{border:1px solid red;}
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;  }
   

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

Я line-height:0 и это прекрасно работает для меня.

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