为什么.NET Razor中的这些HTML元素会有新行引起的额外间距？

Question

我有以下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){
    <input id="box1" type="hidden" value="@Model.SelectedDate.ToString("yyyy-MM-dd")" size="10" /><!--
    --><span id="icon1" class="picture"></span>
}

您会注意到由于删除了任何潜在的空白区域而不再发生移位.如果没有这些注释,我可以进入调试器并看到元素之间的额外间距,一旦删除,也可以解决问题.

为什么.cshtml文件中的标准新行(在Razor块内)导致这些HTML元素之间存在不间断的空格？我之前从未在同一类型的场景中的其他文件中看到此行为.

Answer 1

inline-block我猜你的HTML文档中会出现白色空间,因为这些都是元素.

想想它们不是页面上的元素,而是句子中的单词.浏览器就是这样做的.所以,如果我把:

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

在HTML中,我希望看到:

这是一个句子.

在我的文件中.这是因为HTML在渲染时将白色空间的聚合字符串(包括换行符和寄存器返回)解释为累积一个空格.它希望标签强行打破一条线,如果这是欲望的话.给定white-space: normal(CSS默认值),如果行上的文本没有足够的空间,那么它将换行.这允许格式良好且可读的HTML(这是一个旁边,但重要的是理解它为什么以这种方式工作).

这是与故事inline或inline-block元素相同的故事.它们的处理方式与布局中的文本非常相似,从而尊重周围的白色空间. 这很好,因为这是内联元素的预期行为. 在使用这些显示属性布置文档时,您只需要做一些特殊注意事项.

将HTML注释留在代码中,或在CSS中使用此模式:

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

.container你在有问题的元素周围的包装器在哪里.