奇怪的标记行为：UI上出现额外的空间

Question

我有一个ASP.NET应用程序，其中包含与我的案例相关的简单标记。看起来像：

此类标记会生成以下结果视图：

正如您所看到的，用户名和感叹号之间有一个额外的空格。但是，如果我只是将Label移动到与用户控件相同的字符串，它就会消失：

我检查了两个元素并没有找到任何填充/边距（事件继承）。相对于CSS，两个控件都没有任何可疑设置（可能我错过了一些white-space设置或类似的东西，抱歉，我不是设计的）。生成的HTML看起来像：

<div id="topMenu_pnlCurrentUser" class="account-user">
      <span id="topMenu_lblHelloUserText">Welcome, </span>
      <a id="topMenu_ctrlCurrentUser_lnkEntityDetails" href="/Application/UserDetails.aspx?user_id=3512">Popov Alexander</a>
      <span>!</span>
    </div>

肯定换行会产生这个问题，但我不知道它是如何从HTML / CSS的角度来看的，更糟糕​​的是，我不知道如何在没有移动Label的情况下修复它上一个字符串。

Answer 1

如果查看生成的HTML，您会发现Alexander</a>和<span>!之间存在空格（换行符和制表符）。由于两个元素都是内联元素，因此它们之间的空白区域将呈现为空格。

更简单的解决方案：移除空白区域。

CSS解决方案（可能会导致比您尝试解决的问题更多的问题）：浮动所有跨度和标签，添加右边距（并使用溢出隐藏）。

.account-user { overflow: hidden; }
.account-user span, .account-user a { float: left; margin-right: 8px; }
.account-user span:last-child { margin-right: 0; }

Answer 2

对于感叹号，似乎不需要另一个<asp:Label />。

Welcome, <StartTrack:UserEntityDetails ... />!

这就是你真正需要的。