Dlaczego te elementy HTML w .NET Razor mają dodatkowe odstępy spowodowane przez nowe linie?

Question

Mam następujący kod HTML do renderowania polu wprowadzania daty z ikoną:

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

Zauważysz, że ikona jest przesunięty w prawo. Gdybym zmodyfikować kod, aby być:

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

można zauważyć, że nie ma już przesunięcie uwagi na usunięcie wszelkich potencjalnych białej przestrzeni. Bez tych komentarzy, mogę przejść do debuggera i zobaczyć dodatkowe odstępy między elementami, które po usunięciu, naprawia również problem.

Dlaczego są standardowymi nowe linie w pliku .cshtml (wewnątrz bloku Razor), powodując tam być non-breaking przestrzenie między tymi elementami HTML? Nigdy nie widziałem tego zachowania w innych plikach tego samego typu.

Answer 1

Widzisz white-space w dokumencie HTML renderowane, ponieważ są one zarówno inline-block elementy, zgaduję.

myśleć o nich nie jako elementów na stronie, a następnie, ale słowa w zdaniu. Przeglądarka robi to w ten sposób. Tak więc, jeśli kładę:

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

w HTML, to bym się spodziewać:

Oto zdanie.

w moim dokumencie. Wynika to z tego, że HTML interpretuje zagregowane ciągi znaków typu white-space (w tym podziały wierszy i rejestru) jako łączną jedną spację podczas renderowania. Oczekuje, że tag przymusowo złamie linię, jeśli takie jest pragnienie. Biorąc pod uwagę white-space: normal (domyślny CSS), jeśli nie ma wystarczająco dużo miejsca na tekst na linii, to będzie zawijany. Pozwala to na dobrze sformatowany i czytelny HTML (który jest na bok, ale ważne jest, aby zrozumieć, dlaczegoto działa w ten sposób). To jest ta sama historia z elementami . Są traktowane jak tekst w układzie, a tym samym szanują otaczającą białą przestrzeń. To dobrze, ponieważ to zamierzone zachowanie dla elementów śródliniowych. Po złożeniu dokumentu za pomocą tych właściwości wyświetlania należy po prostu uwzględnić pewne szczególne kwestie. komentarz HTML

Albo zostawić w kodzie, lub korzystać z tego wzoru w CSS:

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

gdzie .container jest cokolwiek masz otoki wokół elementów przestępczych.

Answer 2

To nie jest rzeczą Razor; nawet statyczny HTML miałby ten sam problem. Spacja niestety wpłynie na układ, niezależnie od tego, czy jest to podział linii czy spacje.