html - div - El relleno/margen misterioso aparece después de la imagen en modo estricto

title html css

Question

Creé un nuevo documento con xhtml 1.0 y html 4.01 STRICT solo para aislar esto. Todo lo que tengo en su cuerpo es:

<div style="border: blue 3px solid;">
<img src="testimage.jpg" width="800" height="400">
</div>

El resultado es normal, excepto que hay un espacio de 5px debajo de la imagen que desaparece si cambio el doctype a transicional. También desaparece si configuro mostrar: bloquear a la imagen.

Puede ver el resultado usted mismo aquí (sé que el espacio en blanco a la derecha es normal ya que es un elemento de bloque): http://i52.tinypic.com/2prd1jd.jpg

Intenté establecer el margen / relleno en 0, incluso esto:

*
{
   margin: 0; padding: 0;
}

pero sigue siendo el mismo.

¿Alguien puede explicar este comportamiento?

Answer 1

Esto se debe a que, como lo menciona @Pawel, "de forma predeterminada, una imagen se representa en línea". Dado que está "en línea", algunos espacios a continuación se darán para caracteres como ''g, j, q, y'' etc.

• La imagen es de: https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps .

Así que otra solución es simplemente configurar la imagen como bloque:

img {
  display:block;
}

Un ejemplo está aquí: https://gist.github.com/MrCoder/450783bc33d6b412075d

Answer 2

Tiene que ver con la alineación vertical de la imagen. Prueba esto:

img{
 vertical-align: top;   
}

Y el espacio se irá.

Para aclarar, si coloca un texto junto a la imagen, verá el problema. La imagen se alinea con la base del texto, pero las letras como y y g irán debajo de esa línea. El espacio extra es para aquellas letras sobresalientes.