¿Por qué caracteres son de formato como CRLF ser prestados por algunos navegadores como espacios en blanco?

Question

Necesito que alguien me explique donde esta acolchado adicional proviene de en divs que contienen elementos img.

Puede ir a http://www.dev12.com/CSSTest de ejemplos vivos de mis dos problemas.

Problema # 1 : Safari, Firefox y Opera hacen aproximadamente 6 píxeles de relleno de fondo no deseado en el div contenedor. No importa si fijo explícitamente relleno para 0px.

Problema # 2 : Si puedo formatear mi código para que cada imagen está en su propia línea en mi archivo html, un adicional de 6 píxeles de relleno derecho se añaden a cada imagen. Por ejemplo, el siguiente bloque de código hace que el relleno no deseada entre las dos imágenes:

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

Sin embargo, este bloque de código no tiene el espacio deseado:

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

Obviamente Safari, Firefox y Opera están prestando mi retorno de carro entre las etiquetas span como espacio en blanco. No recuerdo haber tenido este problema antes. Estoy escribiendo mi código en Textmate. ¿Hay un ajuste que debería mirar para prevenir esto?

I siempre uso el XHTML 1.0 DOCTYPE estricto. Esto es particularmente confuso para mí porque es muy rudimentaria. Alguien me ayuda a entender esto!

KN

Answer 1

# 1 Eso es debido a la alineación de la línea de base por defecto de las imágenes en línea - el espacio adicional que se está viendo está reservado para los descendentes (letras que van por debajo de la línea de base: g, p, q, y, etc.) en el texto que rodea las imágenes. (El hecho de que usted no tiene ningún texto es irrelevante -. Espacio para ellos es todavía reservado)

Usted puede deshacerse de él de esta manera:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

# 2 Las nuevas líneas son espacios en blanco, y se les muestran como espacios. Si tenías HTML siguiente:

<p>This is a sentence
in a paragraph.<p>

lo que espera el navegador para poner un espacio entre "condena" y "en", no? <img> elementos son los bloques en línea, al igual que las palabras en un párrafo.

Answer 2

Si no recuerdo mal, las especificaciones HTML dicen que cualquier y todos los espacios en blanco en el archivo de origen será mostrado como un solo espacio en blanco.

Por ejemplo, si se abre un nuevo documento HTML y escriba

hello
world

El resultado será "hola mundo"

El mismo resultado aparecerá para cualquiera de los siguientes:

hello


world

------ o ----------

hello world

------ o ----------

hello                                                 world

A pesar de la cantidad de espacio en blanco que puso entre "hola" y "mundo" sólo uno se rinda. No importa si el espacio en blanco es un CRLF o un carácter de espacio.