内联跨度内元素的空白显示规则
Display Rules for Whitespace for Elements inside Inline Spans
我有一个奇怪的问题，我倾向于认为 space 应该存在，但浏览器破坏了它。至少，我不能完全理解在 display: inline-block; 内的元素中如何处理 space 的行为的基本逻辑。例如：
<p>
Space in an inline: This will have no<span style="display: inline-block;" class="bold"> space in it.</span>
</p>
<p>
<span style="display: inline-block;">Space btw inlines: This will have a</span> <span style="display: inline-block;" class="bold"><span> space in it.</span></span>
</p>
<p>
Space in the span: This will have a<span> space in it.</span>
</p>
产生 HTML 显示：
Space in an inline: This will have nospace in it.
Space btw inlines: This will have a space in it.
Space in the span: This will have a space in it.
这很奇怪，原因有几个。首先，第一种情况，no和space之间的space依然存在。复制并粘贴，它将出现在您的文本中（参见：http://jsfiddle.net/gdhgmj7g/2/）。但是，它不会显示在网页中。有谁知道实际处理方式的规则？这是一个错误还是某种有意的行为？最奇怪的是，第一个案例的范围内有一个 space，除非您复制粘贴内容，否则您根本看不到它。第二个在内联跨度之间有一个 space，这样就可以合理地显示内容。同样，在普通段落（第三种情况）中，一切都按预期进行。这种行为在 IE、Firefox 和 Chrome 中一致发生，所以我假设它背后有一些逻辑。但我不知道为什么会这样。
display:inline-block 元素是行内级块容器。
与所有块容器一样，它由垂直堆叠的行框组成。在第一个内联块跨度的情况下，堆栈只有一个行框高。
white-space 规则适用于该行框。规则规定：
As each line is laid out,
- If a space (U+0020) at the beginning of a line has 'white-space' set to
'normal', 'nowrap', or 'pre-line', it is removed.
- All tabs (U+0009) are rendered as a horizontal shift that lines up the
start edge of the next glyph with the next tab stop. Tab stops
occur at points that are multiples of 8 times the width of a space
(U+0020) rendered in the block's font from the block's starting
content edge.
- If a space (U+0020) at the end of a line has 'white-space' set to
'normal', 'nowrap', or 'pre-line', it is also removed.
- If spaces (U+0020) or tabs (U+0009) at the end of a line have
'white-space' set to 'pre-wrap', UAs may visually collapse them.
因此根据规则 1，跨度开始处的 space 为 "removed"。请注意，这是一个 layout 行为。 space 仍在内容中，因此当您复制并粘贴它时，space 也包含在内。
在第二种情况下，space 位于行内块元素之间。它既不在行首，也不在行尾，因此不会被 white-space 布局规则删除。
在您的第三种情况下，默认情况下，span 元素不是块容器。它们不会创建一堆行框，因此 space 不在行框的开头或结尾，因此它不会被 white-space 布局规则删除。
我有一个奇怪的问题，我倾向于认为 space 应该存在，但浏览器破坏了它。至少，我不能完全理解在 display: inline-block; 内的元素中如何处理 space 的行为的基本逻辑。例如：
<p>
Space in an inline: This will have no<span style="display: inline-block;" class="bold"> space in it.</span>
</p>
<p>
<span style="display: inline-block;">Space btw inlines: This will have a</span> <span style="display: inline-block;" class="bold"><span> space in it.</span></span>
</p>
<p>
Space in the span: This will have a<span> space in it.</span>
</p>
产生 HTML 显示：
Space in an inline: This will have nospace in it.
Space btw inlines: This will have a space in it.
Space in the span: This will have a space in it.
这很奇怪，原因有几个。首先，第一种情况，no和space之间的space依然存在。复制并粘贴，它将出现在您的文本中（参见：http://jsfiddle.net/gdhgmj7g/2/）。但是，它不会显示在网页中。有谁知道实际处理方式的规则？这是一个错误还是某种有意的行为？最奇怪的是，第一个案例的范围内有一个 space，除非您复制粘贴内容，否则您根本看不到它。第二个在内联跨度之间有一个 space，这样就可以合理地显示内容。同样，在普通段落（第三种情况）中，一切都按预期进行。这种行为在 IE、Firefox 和 Chrome 中一致发生，所以我假设它背后有一些逻辑。但我不知道为什么会这样。
display:inline-block 元素是行内级块容器。
与所有块容器一样，它由垂直堆叠的行框组成。在第一个内联块跨度的情况下，堆栈只有一个行框高。
white-space 规则适用于该行框。规则规定：
As each line is laid out,
- If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.
- All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
- If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
- If spaces (U+0020) or tabs (U+0009) at the end of a line have 'white-space' set to 'pre-wrap', UAs may visually collapse them.
因此根据规则 1，跨度开始处的 space 为 "removed"。请注意，这是一个 layout 行为。 space 仍在内容中，因此当您复制并粘贴它时，space 也包含在内。
在第二种情况下，space 位于行内块元素之间。它既不在行首，也不在行尾，因此不会被 white-space 布局规则删除。
在您的第三种情况下，默认情况下，span 元素不是块容器。它们不会创建一堆行框，因此 space 不在行框的开头或结尾，因此它不会被 white-space 布局规则删除。