Perché questi elementi HTML all'interno di .NET Razor hanno spazi aggiuntivi causati da nuove linee?

Question

Ho il seguente codice HTML per rendere una casella di appuntamento con un'icona:

@if (Model.ShowThis){ 
    <input id="box1" type="hidden" value="@Model.SelectedDate.ToString("yyyy-MM-dd")" size="10" /> 
    <span id="icon1" class="picture"></span> 
} 

noterete che l'icona sia spostato a destra. Se modifico il codice per essere:

@if (Model.ShowThis){ 
    <input id="box1" type="hidden" value="@Model.SelectedDate.ToString("yyyy-MM-dd")" size="10" /><!-- 
    --><span id="icon1" class="picture"></span> 
} 

si noterà che non c'è uno spostamento a causa della rimozione di qualsiasi spazio bianco potenziale. Senza questi commenti, posso andare nel debugger e vedere spaziatura aggiuntiva tra gli elementi, che una volta rimosso, risolve anche il problema.

Perché le nuove righe standard all'interno di un file .cshtml (all'interno di un blocco Razor) causano spazi non interrotti tra questi elementi HTML? Non ho mai visto questo comportamento prima in altri file nello stesso tipo di scenario.

Answer 1

Stai vedendo lo spazio bianco nel documento HTML come questi sono entrambi elementi inline-block, immagino.

Pensa a loro non come a elementi di una pagina, quindi, ma a parole in una frase. Il browser fa così. Quindi, se ho messo:

<div> 
    Here 
    is 
    a 
    sentence. 
</div> 

in HTML, mi aspetto di vedere:

Ecco una frase.

nel mio documento. Questo perché HTML interpreta stringhe di spazio bianco aggregate (incluse interruzioni di riga e ritorni di registro) come cumulativamente uno spazio durante il rendering. Si aspetta che un tag spezzi forzatamente una linea, se questo è il desiderio. Dato white-space: normal (il valore predefinito CSS), se non c'è abbastanza spazio per il testo sulla linea, allora verrà completato. Ciò consente l'HTML ben formattato e leggibile (che è una parte, ma è importante capire perché funziona in questo modo).

È la stessa storia con gli elementi inline o inline-block. Sono gestiti in modo simile al testo nel layout e quindi rispettano lo spazio bianco circostante. Questo va bene, perché è il comportamento previsto per gli elementi in linea. Hai solo bisogno di fare alcune considerazioni speciali quando disponi il tuo documento usando quelle proprietà di visualizzazione.

O lasciare il vostro commento HTML nel codice, o utilizzare questo modello in CSS:

.container { 
    font-size: 0; 
} 
.container > * { 
    font-size: 1rem; 
} 

dove .container è qualunque involucro si dispone intorno agli elementi incriminati.

Answer 2

Non è una cosa di Razor; anche l'HTML statico avrebbe lo stesso problema. Purtroppo, lo spazio bianco influirà sul layout, che si tratti di interruzioni di riga o spazi.