span 标签后的空格答案

【问题标题】：Space after span tagspan 标签后的空格
【发布时间】：2014-09-21 04:15:15
【问题描述】：

我一直认为在 HTML 中标签的间距不会影响代码的内容。然而，在这个例子中，我发现内容会受到空格的影响。

<h4><span class = "glyphicon glyphicon-pushpin"> Vaccinations</span> </h4>

在这种情况下，如果我删除开始跨度标记后的空格，Bootstrap Glyphicon 将按在“疫苗接种”标题上。但是，如果我添加空格，则会在 Glyphicon 和“疫苗接种”标题之间出现一个空格.为什么会这样？

【问题讨论】：

有截图分享吗？
因为空格是一个字符。但是，除了pre 标记之外，许多空格都被压缩为一个。
行内元素对空格敏感。
在 HTML 中，空格通常被缩减为单个字符。我不确定你从哪里得到它被剥离的想法，但你错了。

标签： html twitter-bootstrap tags spacing

【解决方案1】：

元素内容中的空格只是字符数据，并被插入到内部表示（DOM）中的元素内容中。所以空间是相关的，尽管在某些条件下它们可能会在渲染中被忽略。

特别是，行首的空格会被忽略；它不会导致间距。但是这里的页面使用 Twitter Bootstrap 技术在元素内容的开头插入图标。这些技术使用 CSS 中的 :before 伪元素添加代码点（私人使用“字符”），并使用 CSS 规则将该代码点呈现为特殊字形。这意味着当 span 元素被渲染时，它的内容以那个代码点开始，作为“生成的内容”，然后是 HTML 标记中的内容。因此，如果 HTML 标记中有空格，这里将被视为单词空格，而不是位于行首。

这可以通过更简单的设置来说明，我使用真实字符“X”作为生成的内容：

<style>
div:before { content: "X" }
</style>
<div>foo</div>
<div> foo</div>

这会导致渲染“Xfoo”和“X foo”，

【讨论】：

【解决方案2】：

您错误地使用了 Glyphicon 类。根据the documentation，添加了重点：

仅用于空元素

图标类只能用于不包含文本内容并且没有子元素的元素。

也就是说，您的“疫苗接种”文本不应在 <span class="glyphicon glyphicon-pushpin"> 内。

【讨论】：