空间位置在这些跨度中是否重要？

Question

从这个DOM开始：

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

出于可访问性原因，我们必须添加一个空格，使两个单词不相邻（读作“Lorem Ipsum”而不是“LoremIpsum”）。由于CSS（显示：块），常规显示是相同的。所以我们有：

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

但是，由于某些JavaScript，使用它会更方便：

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

这完全等同吗？空间会被这种方式破坏吗？

Answer 1

答案取决于它 如果span没有以非常明显的方式设置样式，则不会有任何区别。
但是，如果span确实具有与其可能显示的h1不同的特定样式，因为该空格将由第一个样本中的h1设置样式，并且第二个span。

请参阅下面的示例，其中差异由不同的样式提出：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这两个应该是等价的。在inline显示的对象内部时，空格会折叠为单个空格。无论是直接在<h1>下，还是在<span>内，它都应该或多或少相同。主要区别在于第二种情况下的空白将根据span样式进行样式设置。

例如，请参阅section 9.1了解HTML 4规范。

Answer 3

你的两个例子大部分都是等同的。我会看到唯一明显的区别是你是否有某种类型的样式完成了跨度（我假设你这样做）。如果有样式，那么如果空间在跨度内，则样式将应用于空间。我个人喜欢跨距之间的空间，因为它看起来更好，但如果更容易编写一些javascript，我会使用第二个。

Answer 4

如果您计划动态更改跨度，则在两者之间留出空间会更方便。 除此之外，它完全相同。