如何在Blazor的Razor文件中为两个元素添加空白间隔？

当你需要给不同样式的元素间保留空格时，以下几种简洁规范的方法可以解决空格被忽略的问题：

方法1：使用@:语法（最简洁） #

@:是Blazor专门用于输出纯文本的语法，它会明确告诉编译器后续内容为普通文本，不会被解析为HTML标签，空格会完整保留：

<span class="c1">@name</span>@:, <span class="c2">@date</span>

方法2：使用<text>标签包裹文本 #

<text>是Blazor的无渲染文本容器标签，用来输出纯文本内容，只要标签内的, （逗号加空格）是连续的，就能确保空格不被合并：

<span class="c1">@name</span><text>, </text><span class="c2">@date</span>

注意：不要在<text>标签内或标签前后添加不必要的换行，避免HTML自动合并空白字符。

方法3：CSS间距方案（适合样式统一场景） #

如果不需要严格的文本空格，只是需要视觉上的间距，可以通过CSS内边距或外边距实现，比如用Bootstrap的间距类：

<span class="c1">@name</span>, <span class="c2 ps-1">@date</span>

或者自定义CSS：

.c2 { margin-left: 0.25em; }

为什么之前的写法空格被忽略？ #

Blazor编译Razor时会合并元素标签间的空白字符（空格、换行等），同时HTML本身也会自动将多个空白合并为单个，极端情况下标签紧邻时就会出现空格丢失的情况。而@:或<text>能明确指定保留文本内容的格式。

内容的提问来源于stack exchange，提问作者Endi