tamaño - mostrar imagen en html
¿Por qué hay un espacio entre mi imagen y su caja contenedora? (6)
Como la imagen está en línea, se encuentra en la línea de base. Tratar
vertical-align: bottom;
Alternativamente, en IE a veces, si tienes espacios en blanco alrededor de una imagen, obtienes eso. Entonces, si elimina todos los espacios en blanco entre las etiquetas div e img, eso puede resolverlo.
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é?
<!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>
Elimine el salto de línea antes de la etiqueta, de modo que siga directamente la etiqueta sin espacios en blanco entre ella.
No sé por qué, pero para Internet Explorer, esto funciona.
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 formas 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.
line-height: 0; en el DIV padre arregla esto para mí. Presumiblemente, esto significa que la altura de línea predeterminada no es 0.
display: block
en la imagen lo arregla también, pero probablemente lo rompe de otras maneras;)
font-size:0; en el DIV padre es otra forma difícil de solucionarlo.