Perché il browser esegue il rendering di una nuova riga come spazio?

Question

Per lungo tempo, ho voluto capire perché il browser aggiunge uno spazio vuoto tra gli elementi HTML resi quando v'è un ritorno a capo tra di loro, ad esempio:

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

il codice HTML sopra uscita volontà “HelloWorld” stringa senza uno spazio tra “Ciao” ​​e “mondo”, tuttavia nel seguente esempio:

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

il codice HTML sopra uscita volontà un “Ciao mondo” stringa con uno spazio tra “Lui llo "e" Mondo ".

Ora, non ho problemi ad accettare che questo è solo il modo in cui funziona periodo, ma la cosa che mi infastidisce un po 'è che ho sempre avuto l'impressione che spazi (o newline) tra gli elementi HTML non avrebbero importato nel momento in cui il browser ha reso l'html all'utente.

Quindi la mia domanda è se qualcuno sa qual è la ragione filosofica o tecnica alla base di questo comportamento.

Grazie.

Answer 1

I browser condensano più caratteri di spazi vuoti (incluse le nuove linee) in un unico spazio durante il rendering. L'unica eccezione è all'interno degli elementi <pre> o in quelli con CSS property white-space impostato su pre o pre-wrap impostato. (O in XHTML, l'attributo xml:space="preserve".)

Answer 2

Se si ha il carattere "a" tra due tag, ci si aspetterebbe che venisse visualizzato. In questo caso, hai un carattere '\ n' tra due tag; il comportamento è analogo e coerente ('\ n' è reso come un singolo spazio bianco).

Answer 3

HTML è specificato di farlo così:

interruzioni di riga sono anche i caratteri di spazio

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

Answer 4

spazio tra elementi di blocco vengono ignorati. Tuttavia, gli spazi bianchi tra elementi in linea vengono trasformati in uno spazio. Il ragionamento è che gli elementi in linea potrebbero essere intervallati da un testo interno regolare dell'elemento genitore.

consideri il seguente esempio:

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

Nel caso ideale, si desidera che l'utente per vedere

This is my colored Hello World example 

Rimozione spazio bianco tra le due campate però si tradurrebbe in:

This is my colored HelloWorld example 

Ma lo stesso campione può essere riscritto da un autore (con OCD sul formato HTML ng :-)) come:

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

Sarebbe meglio se questo fosse reso coerentemente con l'esempio precedente.

Answer 5

I browser fanno un errore qui:

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

SGML (si veda [ISO8879], sezione 7.6.1) specifica che una linea di rompere subito dopo un tag di apertura deve essere ignorato, come deve un'interruzione di linea immediatamente prima di un tag di chiusura. Questo vale per tutti gli elementi HTML senza eccezioni.