space 位置在这些跨度中重要吗？

Question

从此 DOM 开始：

<h1><span>Lorem</span><span>Ipsum</span></h1>

出于可访问性的原因，我们必须添加一个 space 以便两个词不相邻（读作 "Lorem Ipsum" 而不是 "LoremIpsum"）。由于 CSS (display:block)，常规显示是相同的。所以我们有：

<h1><span>Lorem</span> <span>Ipsum</span></h1>

但是，由于一些 JavaScript，这样会更方便：

<h1><span>Lorem</span><span> Ipsum</span></h1>

这完全等价吗？ space 会被这样破坏吗？

Answer 1

如果您打算动态更改跨度，则在两者之间添加 space 会更方便。除此之外，完全等同。

Answer 2

这两个应该是等价的。当在 inline 显示的对象中时，白色 space 会折叠成一个 space。不管是直接在<h1>下面，还是在<span>里面，应该差不多吧。主要区别在于第二种情况中的白色space 将根据span 样式进行样式设置。

例如 HTML 4 规范，请参见 section 9.1。

Answer 3

答案视情况而定。
如果 span 没有以非常独特的方式设置样式，则不会有任何区别。
但是，如果 span 确实具有与 h1 在排版上不同的特定样式，它可能会显示，因为 space 将由第一个示例中的 h1 设置样式，而span 第二个。

请参阅下面的示例，其中不同的样式带来了差异：

h1 {
  font-size: 3em;
}
h1 span {
  font-size: 0.5em;
}

<h1><span>Lorem</span> <span>Ipsum</span></h1>
<h1><span>Lorem</span><span> Ipsum</span></h1>

Answer 4

您的两个示例在大多数情况下都是等效的。我会看到的唯一明显区别是，如果您对 span 进行了某种类型的样式设置（我假设您这样做了）。如果有样式，那么如果 space 在范围内，则样式将应用于 space。我个人比较喜欢span之间的space，因为这样比较好看，但是如果写一些javascript比较容易，我会用第二个

space 位置在这些跨度中重要吗？

Is the space position important in these spans?

html

javascript

whitespace

dom

accessibility