仅用于空元素

Question

我一直认为在HTML中，标签的间距不会影响代码的内容。但是，在此示例中，我发现内容受空格影响。

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

在这种情况下，如果我在打开的span标签之后删除了空格，则按下＃＆＃34; Vaccinations＆＃34;按下Bootstrap Glyphicon。 header.However，如果我添加空格，Glyphicon和＆＃34; Vaccinations＆＃34;之间会出现一个空格。头。为什么会这样？

Answer 1

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

特别是忽略一行开头的空格;它不会造成间距。但是这里的页面使用Twitter Bootstrap技术在元素内容的开头插入图标。这些技术使用CSS中的:before伪元素添加代码点（Private Use“character”），并使用CSS规则将该代码点呈现为特殊字形。这意味着当呈现span元素时，其内容以该代码点开头，作为“生成的内容”，然后是HTML标记中的内容。因此，如果HTML标记中有空格，则会在此处将其视为字空间，而不是位于行的开头。

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

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

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

Answer 2

您未正确使用Glyphicon类。每the documentation，强调增加：

仅用于空元素

图标类只应用于不包含文本内容且不包含子元素的元素。

这就是说你的预防接种＆＃34;文字不应在<span class="glyphicon glyphicon-pushpin">。

之内

span标签后的空格

2 个答案:

仅用于空元素