Sto cercando di capire meglio il modello di elaborazione degli spazi bianchi HTML. In questo momento sto confrontando due frammenti di codice HTML:Spazio vuoto HTML: spazi prima e dopo <br>
<div>a <br>z</div>
e
<div>a<br> z</div>
Il primo frammento, quando renered, produce due linee: "a "
e "z"
(Così la prima linea ha uno spazio finale.)
Il secondo snippet produce due righe: "a"
e "z"
. Non c'è spazio principale sulla seconda riga.
La mia domanda è: perché? Attualmente sto usando questo http://www.w3.org/TR/CSS2/text.html#white-space-model come riferimento. Si afferma
- Se uno spazio (U + 0020) all'inizio di una riga ha 'white-space' impostato a 'normale', 'nowrap', o 'pre-line', viene rimosso .
- Tutte le schede (U + 0009) vengono visualizzate come uno spostamento orizzontale che allinea il bordo iniziale del glifo successivo con il successivo punto di tabulazione. I punti di tabulazione si verificano in punti multipli di 8 volte la larghezza di uno spazio (U + 0020) visualizzati nel carattere del blocco dal bordo del contenuto iniziale del blocco.
- Se uno spazio (U + 0020) alla fine di una riga ha lo "spazio bianco" impostato su "normale", "nowrap" o "pre-line", viene rimosso anche.
- Se gli spazi (U + 0020) o schede (U + 0009) alla fine di una riga hanno 'spazio bianco' impostato su 'pre-wrap', gli UA potrebbero comprimerli visivamente.
Una lettura naive di questo indicherebbe che, poiché uno spazio che all'inizio o fine di una riga deve essere rimosso (ove 'white-space' è 'normale'), la prima delle i miei frammenti non dovrebbero comportare uno spazio finale. Ma non è questo il caso.
Quindi cosa sta succedendo?
La mia teoria corrente è che lo <br>
è segretamente contato come un "carattere" che, nel primo frammento, impedisce che lo spazio finale si trovi alla "fine" della sua linea. Ma davvero non ne ho idea.
MODIFICA: per essere chiari, so come usare
per creare spazi a volontà. La mia domanda è su quale regola (rispetto ad alcune specifiche) induce il comportamento di cui sopra.
https://drafts.csswg.org/css-text/#white-space-phase-1, la specifica attuale, potrebbe fornire alcuni approfondimenti – sideshowbarker
@Vucko: Ecco come appare nell'ispettore DOM, non come è reso. – BoltClock
@sideshowbarker: buon dolore. La quantità di gergo nel testo css rende il testo CSS2.1 letto come un libro per bambini. – BoltClock