html - 为什么 .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 block 内)中的标准换行导致这些 HTML 元素之间存在不间断空格？我以前从未在同一类型场景的其他文件中看到过这种行为。

Answer 1

我猜您会在 HTML 文档中看到呈现的空白，因为它们都是 inline-block 元素。

然后，不要将它们视为页面上的元素，而是句子中的单词。浏览器就是这样做的。所以，如果我输入:

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

在 HTML 中，我希望看到:

Here is a sentence.

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

inline 或 inline-block 元素也是如此。它们的处理方式与布局中的文本非常相似，因此尊重周围的空白区域。 这很好，因为这是内联元素的预期行为。您只需要在使用这些显示属性布置文档时进行一些特殊考虑。

要么在代码中留下您的 HTML 注释，要么在 CSS 中使用此模式:

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

其中 .container 是您围绕违规元素的任何包装器。