Pourquoi le navigateur affiche-t-il une nouvelle ligne comme espace?

Question

Pendant très longtemps, je voulais comprendre pourquoi le navigateur ajoute un espace vide entre les éléments HTML rendus quand il y a un NewLine entre eux, par exemple:

<span>Hello</span><span>World</span> 

Le code HTML ci-dessus sortie du « HelloWorld » chaîne sans un espace entre « Bonjour » et « monde », mais dans l'exemple suivant:

<span>Hello</span> 
<span>World</span> 

le code HTML ci-dessus sortie une chaîne « Bonjour tout le monde » avec un espace entre « Il llo "et" Monde ".

Maintenant, je n'ai aucun problème à accepter que c'est juste comme cela fonctionne période, mais la chose qui me dérange un peu, c'est que j'avais toujours l'impression que les espaces (ou les nouvelles lignes) entre les éléments html au moment où le navigateur a rendu le code HTML à l'utilisateur. Donc, ma question est de savoir si quelqu'un sait quelle est la raison philosophique ou technique de ce comportement.

Merci.

Answer 1

Les navigateurs condensent plusieurs caractères d'espaces (y compris les retours à la ligne) en un seul espace lors du rendu. La seule exception est dans <pre> éléments ou ceux qui ont le CSS property white-space mis à pre ou pre-wrap ensemble. (Ou en XHTML, l'attribut xml:space="preserve".)

Answer 2

Si vous aviez le caractère 'a' entre deux balises, vous vous attendez à ce qu'il soit rendu. Dans ce cas, vous avez un caractère '\ n' entre deux balises; le comportement est analogue et cohérent ('\ n' est rendu comme un espace blanc unique).

Answer 3

HTML est spécifié pour le faire comme ça:

Les sauts de ligne sont également des caractères blancs

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1

Answer 4

entre les éléments de Whitespace blocs sont ignorés. Cependant, les espaces entre les éléments en ligne sont transformés en un seul espace. Le raisonnement est que les éléments en ligne peuvent être entrecoupés de texte interne régulier de l'élément parent.

Prenons l'exemple suivant:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p> 

Dans le cas idéal, vous voulez que l'utilisateur de voir

This is my colored Hello World example 

Suppression les espaces blancs cependant entre les deux travées entraînerait:

This is my colored HelloWorld example 

Mais ce même échantillon peut être réécrit par un auteur (avec OCD sur le format HTML ng :-)) as:

<p> 
    This is my colored 
    <span class="red_text">Hello</span> 
    <span class="blue_text">World</span> 
    example 
</p> 

Il serait préférable que cela soit rendu de manière cohérente avec l'exemple précédent.

Answer 5

Browsers font une erreur ici:

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1

SGML (voir [ISO8879], section 7.6.1) précise qu'une saut de ligne immédiatement après une balise de début doit être ignorée, comme doit un saut de ligne immédiatement avant une balise de fin. Ceci s'applique à tous les éléments HTML sans exception.