caracteres Por que a formatação como CRLF sendo processado por alguns navegadores como espaços em branco?

Question

Eu preciso de alguém para explicar-me onde esta cobertura extra está vindo em divs que contêm elementos img.

Você pode ir para http://www.dev12.com/CSSTest para exemplos vivos de meus dois problemas.

Problema # 1 : Safari, Firefox e Opera tornar aproximadamente 6 pixels de preenchimento de fundo indesejado na div container. Não importa se eu explicitamente definir o preenchimento para 0px.

Problema # 2 : Se eu formatar meu código para que cada imagem é, por si própria linha no meu arquivo html, um adicional de 6 pixels de preenchimento direito são adicionados a cada imagem. Por exemplo, o seguinte bloco de código torna preenchimento indesejada entre as duas imagens:

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

No entanto, este bloco de código não tem o espaço indesejado:

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

Obviamente Safari, Firefox e Opera estão prestando meu retorno de carro entre tags span como espaços em branco. Não me lembro de ter este problema antes. Eu estou escrevendo o meu código em Textmate. Existe uma configuração que eu deveria olhar para evitar isso?

Eu sempre usar o doctype XHTML 1.0 Strict. Isto é particularmente confuso para mim, porque é tão rudimentar. Alguém me ajudar a entender isso!

KN

Answer 1

# 1 Isso porque o alinhamento da linha de base padrão de imagens inline - o espaço extra que você está vendo é reservado para descenders (letras que vão abaixo da linha de base: g, p, q, y, etc.) no texto circundante suas imagens. (O fato de você não ter nenhum texto é irrelevante -. Espaço para eles ainda é reservado)

Você pode se livrar dele assim:

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

# 2 Newlines são espaços em branco, e são exibidas como espaços. Se você tivesse HTML assim:

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

você esperaria o browser para colocar um espaço entre "sentença" e "in", não é? elementos <img> são blocos em linha, assim como palavras em um parágrafo.

Answer 2

Se bem me lembro, as especificações HTML dizer que todo e qualquer espaço em branco no arquivo de origem será processado como um único espaço em branco.

Por exemplo, se você abrir um novo doc HTML e tipo

hello
world

O resultado será "Olá mundo"

O mesmo resultado irá aparecer para qualquer um dos seguintes:

hello


world

------ ---------- ou

hello world

------ ---------- ou

hello                                                 world

Independentemente de quanto espaço em branco que você colocar entre "Olá" e "mundo" apenas um vai render. Não importa se o espaço em branco é um um caractere de espaço CRLF ou.