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

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

¿Cuál es el hueco o espacio extra 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>

Expandir fragmento

Imagen con un espacio en blanco debajo

Apr 27 '11 19:04 Misha Moroshko

De forma predeterminada, una imagen se representa en línea, como una letra, de modo que se ubica en la misma línea en la que se encuentran a, b, c y d.

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

Demostración de descensores.

Puede:

ajustar el vertical-alignde la imagen para colocarla en otro lugar (por ejemplo, el 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>

Expandir fragmento

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

Apr 27 '2011 12:04 Quentin

Otra opción sugerida en esta publicación de blog es configurar el estilo de la imagen comostyle="display: block;"

Aug 25 '2011 20:08 Thea

Arreglo rapido:

Para eliminar el espacio debajo de la imagen , puedes:

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 endisplay:block;

Consulte el siguiente código para una demostración en vivo:

Mostrar fragmento de código

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

Expand snippet

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

El espacio extra debajo de la imagen no es un error ni un problema, es el comportamiento predeterminado. La causa principal es que las imágenes son elementos reemplazados ( consulte Elementos reemplazados de 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 inline, pero les dan un comportamiento especial que los acerca a inline-blocklos elementos (ya que puede alinearlos verticalmente, déles les una altura, margen superior/inferior y relleno, transformaciones...).

Esto también significa que:

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

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

Ubicación de la línea base en el texto. ( Fuente de imagen )

Los elementos alineados con la línea base deben mantener espacio para los descendentes que se extienden por debajo de la línea base (como j, p, g ...), como puede ver en la imagen de arriba. En esta configuración, la parte inferior de la imagen está alineada con 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>

Expandir fragmento

Esta es la razón por la que el comportamiento predeterminado de la <img>etiqueta crea un espacio en la parte inferior de su contenedor y por qué cambiar la propiedad de alineación vertical o la propiedad de visualización lo 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>

Expandir fragmento

Jan 22 '2016 17:01 web-tiki