A imagem dentro de div possui espaço extra abaixo da imagem

Por que no código seguir a altura do divé maior que a altura do img? Há uma lacuna abaixo da imagem, mas não parece ser um preenchimento / margem.

Qual é a diferença ou espaço extra abaixo da imagem?

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

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

Por padrão, uma imagem é renderizada em linha, como uma letra, para que fique na mesma linha em que a, b, ce ed.

Há espaço abaixo dessa linha para os descendentes encontrados em letras como g, j, peq.

Você pode:

• ajuste a vertical-alignimagem para posicioná-la em outro lugar (por exemplo, o middle) ou
• altere o displaymodo para que não fique embutido.

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>

A imagem incluída é de domínio público e é originária do Wikimedia Commons

Outra opção sugerida aqui é definir o estilo da imagem comostyle="display: block;"

Conserto rápido:

Para remover o espaço abaixo da imagem , você pode:

• Defina a propriedade de alinhamento vertical da imagem como vertical-align: bottom; vertical-align: top;ouvertical-align: middle;
• Defina a propriedade de exibição da imagem como display:block;

Veja o código a seguir para uma demonstração ao vivo:

#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>

Explicação: por que há uma lacuna na imagem?

A lacuna ou espaço extra sob a imagem não é um bug ou problema, é o comportamento padrão. A causa principal é que as imagens são elementos substituídos ( consulte Elementos substituídos pelo MDN ). Isso permite que eles "ajam como imagem" e tenham suas próprias dimensões intrínsecas, relação de aspecto ...
Os navegadores calculam suas propriedades de exibição, inlinemas fornecem um comportamento especial que os aproxima.inline-block elementos (como você pode alinhar verticais los, dar uma altura, margem superior / inferior e estofamento, transforma ...).

Isso também significa que:

<img>não possui linha de base; portanto, quando as imagens são usadas em um contexto de formatação em linha com alinhamento vertical: linha de base, a parte inferior da imagem será colocada na linha de base do texto.
( fonte: MDN , ênfase minha )

Como os navegadores, por padrão, calculam a propriedade de alinhamento vertical para a linha de base, esse é o comportamento padrão. A imagem a seguir mostra onde a linha de base está localizada no texto:

( Fonte da imagem )

Os elementos alinhados da linha de base precisam manter espaço para os descendentes que se estendem abaixo da linha de base (como j, p, g ...), como você pode ver na imagem acima. Nesta configuração, a parte inferior da imagem está alinhada na linha de base, como você pode ver neste exemplo:

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>

É por isso que o comportamento padrão da <img>tag cria uma lacuna na parte inferior do contêiner e por que alterar a propriedade vertical-align ou a propriedade display remove-a como na seguinte demonstração:

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>

Também é possível anular a altura da linha dos pais:

#wrapper {
  line-height: 0;
}

Todas as correções: http://jsfiddle.net/FaPFv/

Tudo que você precisa fazer é atribuir esta propriedade:

img {
    display: block;
}

As imagens por padrão possuem esta propriedade:

img {
    display: inline;
}

Você pode usar vários métodos para esse problema, como

1. Usando line-height

   #wrapper {  line-height: 0px;  }

2. Usando display: flex

   #wrapper {  display: flex;         }
   #wrapper {  display: inline-flex;  }

3. Usando display: block, table, flexeinherit

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

Eu usei line-height:0e funciona bem para mim.

Achei que funciona muito bem usando display: block; na imagem e alinhamento vertical: top; no texto.

.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>

ou você pode editar o código em JS FIDDLE

Acabei de adicionar float:leftao div e funcionou