html - CSS:什么时候删除空的匿名 block 框？

Question

根据CSS Specification当 block 容器框同时具有内联和 block 内容时，将创建匿名 block 框。

规范使用的例子是

<DIV>
Some text
<P>More text</P>
</DIV>

Chrome 将其呈现为: 一些文字 更多文字

但是，给定:

<DIV>
[5 spaces followed by newline]
<P>Some text</P>
</DIV>

Chrome 将其呈现为: 一些文字

换句话说，包含空格的行被删除。

我对匿名 block 框的创建顺序和 CSS white-space specification 的顺序感到困惑已应用。

a) 如果我们假设首先创建匿名 block 框，我们有

<DIV>
<anonymous_block>[5 spaces followed by newline]</anonymous_block>
<P>Some text</P>
</DIV>

b) 然后，在匿名 block 的布局过程中，我们发现空白模型首先将整个内容缩减为一个空格。创建包含此空格的单行。

c) 此规则导致空间被消除: “如果行尾的空格 (U+0020) 将‘white-space’设置为‘normal’、‘nowrap’或‘pre-line’，它也会被删除。”

d) 此时我们有一条宽度为零的线，但它的高度(如果我正确理解 css 模型)是字体的高度。

因此，我希望在文本之前出现一个具有字体高度的空行。

既然不是这样，那上面哪一步是不正确的呢？请具体说明 CSS 规范如何导致观察到的行为。

Answer 1

在 block 中上下文中，空格将被忽略。

在 inline 中或 inline-block上下文中，空格被修剪成一个空格。

因此，您的 5 个空格字符和换行符不会触发匿名 block 的创建，因为 <p>设置 <div> 的内部在 block 上下文中

关于你的问题。我认为步骤 a) 不正确。这些步骤似乎以不同的顺序调用，从而改变了解释。