当相邻元素中存在相邻空格时，html中显示哪个空格？答案

【问题标题】：Which space is shown in html when there are adjacent spaces in adjacent elements?当相邻元素中存在相邻空格时，html中显示哪个空格？
【发布时间】：2019-12-29 04:13:40
【问题描述】：

以下 HTML 文件

<html><body>x <b> y</b></body><html>

看起来像

<html><body>x <b>y</b></body><html>

和

<html><body>x<b> y</b></body><html>

后两者中哪一个的浏览器可视化效果和原来的一样？

【问题讨论】：

我不知道为什么有人对这个问题投了反对票。很清楚并且有一个正确的答案，它甚至会产生后果，因为 body 和 b 元素的字体大小可能不同，导致 x 和 y 之间的大小差距不同，具体取决于应用的空间折叠逻辑。

标签： html google-chrome firefox safari opera

【解决方案1】：

它会显示：

<html><body>x <b>y</b></body><html>

这与自动换行有关。您不能在不使用不间断空格的情况下在 HTML 中连续使用多个空格：

<html><body>x <b>&nbsp;y</b></body><html>

您还可以更改 white-space 属性以在 CSS 中允许多个空格：

body {
  white-space:pre;
}

如chrome inspector中所示：

【讨论】：

你没有回答我的问题。我不想知道如何连续显示多个空格。
@user1424739 我真的希望这不是一个糟糕的家庭作业问题。但是，如果是，您应该尝试打开 chrome 检查器并将鼠标悬停在字母 x 和字母 y 上。它会告诉你空间在哪里“可视化”。编辑了我的答案...
问题是它没有。如果您只点击x 和y 之间的空格，您可以自己尝试一下。 chrome 不显示空间的来源。
@user1424739 再次更新了我的答案，以便在使用 chrome 检查器时清楚地向您展示它的来源。
好的。我明白你的意思了。您的指针位于 devtools 的“元素”选项卡中。我只是将指针放在浏览器窗口中。