当内容包含新行时，为什么<span>的背景表现不同？</span>

Question

为了通过一些视觉反馈来演示行为，我们为span提供了以下样式：

span {
  background-color: red;
}

如果我们写这样的东西，那么结果看起来没问题，两个跨度都有红色背景，中间有空格：

<span>Hello</span>
<span>World</span>

但是当我们将HTML更改为类似的内容时，两个跨度之间就没有空格了：

<span>
  Hello
</span>
<span>
  World
</span>

我认为空格和新线不会影响任何东西。所以我的问题是为什么会发生这种情况以及我在这里缺少什么？

以下是第一个和第二个行为的屏幕截图（在Chrome，Safari，Firefox上测试）：

jsbin.com/eGElekoW

Answer 1

编辑：为了解决激发这个问题的特定问题，使用

的风格

span {
  display: inline-block;
}

将允许两种形式的HTML在2个红色块之间产生白色条子，因为现在跨度具有块间距和大小调整，同时仍然遵循内联定位。无论如何，在解释上：

换行符或空格都是单个空格。如果2个内联元素之间只有一个空格，那么就会得到一小块白色空间。

<span>Hello</span>
<span>World</span>

在两个span元素之间有一个空格（换行符）。这个

是相同的

<span>Hello</span> <span>World</span>

然而，

<span>Hello </span>
<span>World</span>

在span元素之间没有空格，因为它的HTML因此任何数量的连续空格都被视为单个空格。这一次，第一个空白位于跨度内部，因此它得到一个红色背景，第二个空白区域（换行符）与第一个空白区域（已经有红色背景）聚集在一起，因此看不到白色条子。上面的块等同于你的

<span>
  Hello
</span>
<span>
  World
</span>

因为“o”之后的空格位于跨度内部，所以在跨度之外的换行符空格以及W之前的第二个跨度内的换行符空格中聚集，因此背景是连续的。 / p>

你可以看到

<span>Hello</span><span>World</span>

也会有一个连续的红色背景，但两个单词之间没有明显的间距。