Misterioso relleno/margen aparece después de la imagen en modo estricto

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:Misterioso relleno/margen aparece después de la imagen en modo estricto

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

El resultado es normal, excepto que hay un espacio 5px por debajo de la imagen que se va si cambio el tipo de documento de transición. También desaparece si configuro la pantalla: bloquear a la imagen.

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

He intentado establecer el margen/relleno para 0, aunque esto:

* 
{ 
    margin: 0; padding: 0; 
}

pero sigue siendo el mismo.

¿Alguien puede explicar este comportamiento?

Fuente

2011-06-19 John

Mi conjetura es el display: inline es la preservación de los espacios en blanco - lo que sucede si se quita todo saltos de línea de su marcado? – kinakuta

Vaya, esta propiedad no debería estar allí ya que las etiquetas img están en línea por defecto :). Desafortunadamente eso no resuelve el problema. – John

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

img{ 
vertical-align: top; 
}

y el espacio desaparecerá.

Para aclarar, si coloca un texto al lado de la imagen, verá el problema. La imagen se está alineando con la base del texto, pero las letras como y y g irán debajo de esa línea. El espacio extra es para esas letras que sobresalen.

Fuente

2011-06-19 20:47:49

¡Gracias hizo el truco! Todavía no entiendo, sin embargo, ¿por qué esto sucede solo en doctypes estrictos y no en transiciones? Quiero decir, ¿cuál es la lógica detrás de esto? – John

Tendría que buscar en la especificación, pero sospecho que hay algún estándar alrededor de la imagen o la pantalla: en línea que por defecto es 'vertical-align: baseline', incluso puede ser el predeterminado para todos los elementos. Estricto se adhiere al estándar y las peculiaridades no. –

Sorprende que en todos los navegadores esté sucediendo y que nadie arregle el motor del navegador para tratar la imagen como div. "De forma predeterminada, una imagen se muestra en línea", pero ¿por qué espacio? de todos modos, tu respuesta ayudó, podemos seguir adelante. ¡Gracias! –

Esto se debe a que, como menciona @Pawel, "de forma predeterminada, una imagen se representa en línea". Puesto que es "en línea" se darán algunos espacios situados por debajo de personajes como 'g, j, q, y' etc. enter image description here

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

Así pues, otra solución apenas se fija la imagen en forma de bloque:

img { 
    display:block; 
}

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

Fuente

2015-05-27 00:10:15

Misterioso relleno/margen aparece después de la imagen en modo estricto

Respuesta

Cuestiones relacionadas