La imagen dentro de div tiene espacio adicional debajo de la imagen

¿Por qué en el siguiente código la altura de la dives mayor que la altura de la img? Hay un espacio debajo de la imagen, pero no parece ser un relleno / margen.

¿Cuál es el espacio o espacio adicional debajo de la imagen?

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

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

De forma predeterminada, una imagen se representa en línea, como una letra, por lo que se ubica en la misma línea en la que se ubican a, b, cyd.

Hay espacio debajo de esa línea para los descendientes que encuentre en letras como g, j, p y q.

Usted puede:

• ajustar el vertical-alignde la imagen para colocar en otro lugar (por ejemplo la middle) o
• cambie el displaypara que no esté en línea.

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>

La imagen incluida es de dominio público y proviene de Wikimedia Commons

Otra opción sugerida aquí es establecer el estilo de la imagen comostyle="display: block;"

Arreglo rapido:

Para eliminar el espacio debajo de la imagen , puede:

• Establezca la propiedad de alineación vertical de la imagen en vertical-align: bottom; vertical-align: top;overtical-align: middle;
• Establezca la propiedad de visualización de la imagen en display:block;

Vea el siguiente código para una demostración en 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>

Explicación: ¿por qué hay un espacio debajo de la imagen?

El espacio o espacio adicional debajo de la imagen no es un error o problema, es el comportamiento predeterminado. La causa raíz es que las imágenes son elementos reemplazados ( ver elementos reemplazados MDN ). Esto les permite "actuar como una imagen" y tener sus propias dimensiones intrínsecas, relación de aspecto ...
Los navegadores calculan su propiedad de visualización inlinepero les otorgan un comportamiento especial que los acerca a los inline-blockelementos (como puede alinearlos verticalmente, proporcione ellos una altura, margen superior / inferior y relleno, transforma ...).

Esto también significa que:

<img>no tiene línea base, por lo que cuando las imágenes se usan en un contexto de formato en línea con alineación vertical: línea base, la parte inferior de la imagen se colocará en la línea base del texto.
( fuente: MDN , énfasis mío )

Como los navegadores calculan de manera predeterminada la propiedad de alineación vertical a la línea de base, este es el comportamiento predeterminado. La siguiente imagen muestra dónde se encuentra la línea de base en el texto:

( Fuente de la imagen )

Los elementos alineados con la línea de base deben mantener espacio para los descendientes que se extienden por debajo de la línea de base (como j, p, g ...) como se puede ver en la imagen de arriba. En esta configuración, la parte inferior de la imagen está alineada en la línea base, como puede ver en este ejemplo:

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>

Es por eso que el comportamiento predeterminado de la <img>etiqueta crea un espacio en la parte inferior de su contenedor y por qué al cambiar la propiedad de alineación vertical o la propiedad de visualización se elimina como en la siguiente demostración:

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>

También se puede anular la altura de línea de los padres:

#wrapper {
  line-height: 0;
}

Todas las correcciones: http://jsfiddle.net/FaPFv/

Todo lo que tiene que hacer es asignar esta propiedad:

img {
    display: block;
}

Las imágenes por defecto tienen esta propiedad:

img {
    display: inline;
}

Puede usar varios métodos para este problema, como

1. Utilizando line-height

   #wrapper {  line-height: 0px;  }

2. Utilizando display: flex

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

3. El uso de display: block, table, flexyinherit

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

Solía line-height:0y funciona bien para mí.

Descubrí que funciona muy bien usando display: block; en la imagen y alinear verticalmente: arriba; en el 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>

o puede editar el código un JS FIDDLE

Acabo de agregar float:lefta div y funcionó