tamaño - mostrar imagen en html

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

Question

¿Por qué en el siguiente código la altura de la div es 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>

Answer 1

Arreglo rapido:

Para eliminar el espacio debajo de la imagen , puede:

• Establezca la propiedad de vertical-align de la imagen en vertical-align: bottom; vertical-align: top; o vertical-align: middle;
• Establezca la propiedad de visualización de la imagen para 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?

La brecha o el espacio adicional debajo de la imagen no es un error o problema, es el comportamiento predeterminado. La causa principal es que las imágenes son elementos reemplazados ( ver vertical-align y W3C ). Esto les permite "actuar como imagen" y tener sus propias dimensiones intrínsecas, relación de aspecto ...
Los navegadores calculan su propiedad de visualización en inline pero les dan un comportamiento especial que los hace más cercanos a inline-block elementos de inline-block en inline-block (como puede alinearlos verticalmente, darles una altura, margen superior / inferior y relleno, transformaciones ...).

Esto también significa que:

[...] cuando las imágenes se utilizan en un contexto de formato en línea con vertical-align: baseline, la parte inferior de la imagen se colocará en la línea base del contenedor . ( fuente: W3C , énfasis mío )

Como los navegadores de forma predeterminada calculan la propiedad de alineación vertical con 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:

Los elementos alineados con la línea de base deben mantener espacio para los descenders 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 se alinea en la línea de base, como puede ver en este ejemplo:

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>

Esta es la razón por la que el comportamiento predeterminado de la etiqueta <img> 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>

Answer 2

Acabo de añadir float:left to div y funcionó.

Answer 3

Encontré que funciona muy bien usando display: block; en la imagen y alinear verticalmente: superior; 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 de un JS FIDDLE

Answer 4

Otra opción sugerida here es configurar el estilo de la imagen como style="display: block;"

Answer 5

Por defecto, una imagen se representa en línea, como una letra.

Se sienta en la misma línea en la que se sientan a, b, cyd.

Hay un espacio debajo de esa línea para los descendientes que encuentra en las letras f, j, p y q.

Puede ajustar la vertical-align de la imagen para colocarla en otro lugar (por ejemplo, el middle ) o cambiar la display para que no esté en línea.

Answer 6

Puede utilizar varios métodos para este problema como

1. Usando la line-height

   #wrapper { line-height: 0px; }

2. Utilizando display: flex

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

3. Usando display: block , table , flex y inherit

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

Answer 7

También se puede anular la altura de la línea del padre:

#wrapper {
line-height: 0;
}

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

Answer 8

Todo lo que tienes que hacer es asignar esta propiedad:

img {
display: block;
}

Las imágenes por defecto tienen esta propiedad:

img {
display: inline;
}

Answer 9

Usé line-height:0 y funciona bien para mí.