为什么.NETRazor中的这些HTML元素会因新行而产生额外的间距？

我使用以下HTML来呈现带有图标的日期输入框：

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

@if（Model.ShowThis）{
}

您会注意到图标向右移动。如果我将代码修改为：

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

@if（Model.ShowThis）{
}

您将注意到，由于删除了任何潜在的空白，因此不再有偏移。如果没有这些注释，我可以进入调试器，看到元素之间的额外间距，一旦删除，也可以修复问题

---

为什么.cshtml文件中的标准新行（在Razor块中）会导致这些HTML元素之间存在不间断的空格？我以前从未在同一类型场景中的其他文件中见过这种行为。

这不是剃刀；即使是静态HTML也会有同样的问题。不管是换行符还是空格，空格都会影响布局。

我猜，HTML文档中呈现的空格都是

内联块
元素

因此，不要把它们看作页面上的元素，而是句子中的单词。浏览器就是这样做的。因此，如果我提出：

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

其中，
.container
是您在有问题的元素周围使用的任何包装。
非常好的解释！谢谢！你能解释一下你提供的CSS解决方案吗？我尝试了这个，结果它把图标向下移动，而不是像应该的那样回到左边。使用字体大小来实现这一点背后的想法是什么？
font-size
将确定容器中呈现的空白。当它是
0
时，该空白不会呈现，就像字符不会使用
字体大小：0
规则呈现一样。可能是重置才是罪魁祸首。尝试确定原始字体大小，而不是
1rem
（基本上是将其重置为文档根
font size
），将其设置为应用于容器的
字体大小：0
之前的大小。
.container {
  font-size: 0;
}
.container > * {
  font-size: 1rem;
}