¿Por qué hay un espacio entre mi imagen y su caja contenedora?

Cuando mi navegador representa el siguiente caso de prueba, hay un espacio debajo de la imagen. Desde mi comprensión de CSS, la parte inferior del cuadro azul debe tocar la parte inferior del cuadro rojo. Pero ese no es el caso. ¿Por qué?¿Por qué hay un espacio entre mi imagen y su caja contenedora?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head><title>foo</title></head> 
<body> 

<div style="border: solid blue 2px; padding: 0px;"> 

    <img alt='' style="border: solid red 2px; margin: 0px;" 
    src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" /> 

</div> 

</body> 
</html>

Fuente

2008-09-24 raldi

Los elementos en línea están alineados verticalmente con la línea base, no en la parte inferior del cuadro contenedor. Esto se debe a que el texto necesita una pequeña cantidad de espacio debajo para los descensores: las colas de las letras como minúscula 'p'. Entonces, hay una línea imaginaria a una corta distancia por encima de la parte inferior, llamada línea de base, y los elementos en línea están verticalmente alineados con ella por defecto.

Hay dos maneras de solucionar este problema. Puede especificar que la imagen debe estar verticalmente alineada a la parte inferior, o puede establecer que sea un elemento de bloque, en cuyo caso ya no se trata como una parte del texto.

Además de esto, Internet Explorer tiene un error de análisis HTML que no ignora el espacio en blanco posterior después de un elemento de cierre, por lo que puede ser necesario eliminar este espacio en blanco si tiene problemas con la compatibilidad con Internet Explorer.

Fuente

2008-09-24 20:01:54 Jim

Eso responde absolutamente todo lo que me estaba preguntando. Gran trabajo. – raldi

Después de 7 años, esto me ahorró mucho tiempo. ¡Gracias! –

Como la imagen está en línea, se encuentra en la línea base. Pruebe

vertical-align: bottom;

Alternativamente, en IE a veces, si tiene espacios en blanco alrededor de una imagen, la obtiene. Entonces, si elimina todos los espacios en blanco entre las etiquetas div e img, eso puede resolverlo.

Fuente

2008-09-24 19:43:45

¿Puedes explicar tu primera oración un poco más? ¿Por qué la imagen que se encuentra en la línea base causa un espacio, y por qué el cambio de su alineación vertical soluciona el problema? – raldi

¡Jim hizo un gran trabajo! –

Elimine el salto de línea antes de la etiqueta, de modo que siga directamente la etiqueta sin espacios en blanco.

No sé por qué, pero para Internet Explorer, esto funciona.

Fuente

2008-09-24 19:46:50

Solo para aclarar: esto no funciona en FF3 – rcreswick

display: block

en la imagen fija tan bien, pero probablemente lo parte de otras maneras;)

Fuente

2008-09-24 19:46:56

¿Alguien puede verificar/disputar que esto rompe otras cosas? – rcreswick

Significa que la imagen actuará como un bloque, por lo que cualquier elemento que deba seguirlo en línea aparecerá en la siguiente línea disponible –

line-height: 0; en la matriz DIV reparar este problema para mí. Presumiblemente, esto significa que la altura de línea predeterminada no es 0.

Fuente

2008-09-24 19:52:01 ceejayoz

font-size:0; en el DIV principal es otra forma complicada de solucionarlo.

Fuente

2008-09-24 21:05:55

¿Por qué hay un espacio entre mi imagen y su caja contenedora?

Respuesta

Cuestiones relacionadas