Question

我有一个奇怪的问题，我倾向于认为空间应该存在，但浏览器会破坏它。至少，我无法理解在display: inline-block;内部的元素中处理空格的行为的基本逻辑。例如：

<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显示：

内联中的空格：这将包含nospace。

Space btw inlines：这里有一个空格。

跨度中的空格：其中将包含空格。

由于一些原因，这很奇怪。首先，在第一种情况下，no和space之间的空间仍然存在。复制并粘贴，它将在您的文本中（请参阅：http://jsfiddle.net/gdhgmj7g/2/）。但是，它不会显示在网页中。有谁知道实际处理这个的规则？这是一个错误还是某种预期的行为？最奇怪的是，第一种情况在跨度中有一个空格，除非您复制粘贴内容，否则您无法看到它。第二个在内联跨度之间有一个空格，然后可以合理地显示内容。同样，在正常段落（第三种情况）中，事情按预期工作。对于IE，Firefox和Chrome，此行为始终如一，因此我假设它背后有一些逻辑。但我不知道为什么会这样。

Answer 1

display:inline-block元素是内联级块容器。

与所有块容器一样，它由垂直堆叠的线框组成。在第一个内联块跨度的情况下，堆栈只有一个线框高。

white-space规则适用于该行框。规则规定：

每条线都布置好了，


如果行开头的空格（U + 0020）设置为“空格”   'normal'，'nowrap'或'pre-line'，它被移除。

所有标签（U + 0009）都呈现为排列的水平线      使用下一个制表位开始下一个字形的边缘。标签停止      发生在空间宽度的8倍的倍数处      （U + 0020）从块的开始以块的字体呈现      内容优势。

如果行末尾的空格（U + 0020）设置为“空格”      'normal'，'nowrap'或'pre-line'，它也被移除。

如果行末尾有空格（U + 0020）或制表符（U + 0009）      'white-space'设置为'pre-wrap'，UAs可能在视觉上将它们折叠起来。

因此，从规则1开始，跨度开始处的空间被“移除”。请注意，这是布局行为。空间仍然在内容中，因此当您复制并粘贴它时，空间就包含在内。

在第二种情况下，空格位于内联块元素之间。它既不在行的开头也不在行的末尾，因此它不会被空白空间布局规则删除。

在第三种情况下，span元素默认情况下不是块容器。它们不会创建一堆线框，因此空间不在行框的开头或结尾，因此白空间布局规则不会删除它。

内联跨度内元素的空白显示规则

1 个答案: