当 <span> 元素不在 1 行时，为什么 HTML <span> 元素之间的空格分隔符不存在？

Question

我写了一个小HTML/CSS 代码，在Chrome 上显示以下图像

为什么 (⯇ 和 ⯇) 和 (┃ 和 ◆) 之间没有空格分隔符（请参阅yellow unicode）？

为什么，当<span class='char'> 中的所有<span> 都在同一行时，空格分隔符都是可见的（参见green unicode）？

区别仅与 HTML 代码在文件中的编写方式有关，没有别的！ CSS 代码完全相同（仅更改了背景颜色）。

为了方便yellow案例的分析，我放了第三个颜色更多的块。

HTML/CSS 代码如下

body
	{
	font-family: Arial;
	font-size:20px;
	}

div.error span.char
	{
	font-size:40px;
	background-color: yellow;
	}

div.ok span.char
	{
	font-size:40px;
	background-color: lightgreen;
	}

div.color > span.char
	{
	font-size:40px;
	background-color: orange;
	}
div.color > span.char > span.bar
	{
	font-size:40px;
	background-color: cyan;
	}
div.color > span.char > span.triangle
	{
	font-size:40px;
	background-color: lightgrey;
	}

NO SPACE-SEPARATOR<br> between (&#x2BC7; &#x2BC7;) and between (&#x2503;&#x25C6;)

<div class='error'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>

SPACE-SEPARATOR<br> between all &lt;span class='char'&gt;

<div class='ok'>
    <span class='char'><span class='bar'>&#x2503;</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'><span class='triangle'>&#x2BC8;</span><span class='bar'>&#x2503;</span></span>
    <span class='char'>&#x25C6;</span>
</div>

NO SPACE-SEPARATOR with colors

<div class='color'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>

Answer 1

Google Chrome 会忽略 HTML 中的所有内部和外部元素空白字符，除非它们位于文本内部。文本之间的所有空白字符都显示为单个空格字符，但保留字符的实际值。这适用于具有内联或块显示样式的元素。

除了 body 元素的最后一个元素之外的每个元素，在通过三次单击或拖动选择被选中时，都会在末尾显示一个空格。这个空间根据元素的显示风格而有所不同。

复制文本时，块显示元素会产生 2 个 CRLF 字符，而内联显示元素只会产生 1 个 CRLF。空白字符在复制和粘贴之间保持不变，但仅限于一个字符。

虽然 Firefox 忽略了外部元素的空白，但对内部元素的空白字符产生了有趣的结果。所有空白字符都转换为空格，但起始字符除外，每个非空白字符之间的空白限制为一个。仅显示和选择最后一个空格

内嵌显示

无论元素包含什么，复制的文本前后总是有一个空格。每个空白字符都被删除。

块显示

文本前的空白字符保持原样，结束空白字符转换为空格。

所以要回答你的问题，这一切都基于浏览器如何实现显示。

要解决此问题，您可以删除元素之间的所有空格，从而缩小 HTML。

body
	{
	font-family: Arial;
	font-size:20px;
	}

div.error span.char
	{
	font-size:40px;
	background-color: yellow;
	}

div.ok span.char
	{
	font-size:40px;
	background-color: lightgreen;
	}

div.color > span.char
	{
	font-size:40px;
	background-color: orange;
	}
div.color > span.char > span.bar
	{
	font-size:40px;
	background-color: cyan;
	}
div.color > span.char > span.triangle
	{
	font-size:40px;
	background-color: lightgrey;
	}

NO SPACE-SEPARATOR<br> between (&#x2BC7; &#x2BC7;) and between (&#x2503;&#x25C6;)

<div class='error'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span><span class='char'>&#x2BC7;</span><span class='char'>&#x2BC8;</span><span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>

SPACE-SEPARATOR<br> between all &lt;span class='char'&gt;

<div class='ok'>
    <span class='char'><span class='bar'>&#x2503;</span><span class='triangle'>&#x2BC7;</span></span><span class='char'>&#x2BC7;</span><span class='char'>&#x2BC8;</span><span class='char'><span class='triangle'>&#x2BC8;</span><span class='bar'>&#x2503;</span></span><span class='char'>&#x25C6;</span>
</div>

NO SPACE-SEPARATOR with colors

<div class='color'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span><span class='char'>&#x2BC7;</span><span class='char'>&#x2BC8;</span><span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>

body
	{
	font-family: Arial;
	font-size:20px;
	}

div.error span.char
	{
	font-size:40px;
	background-color: yellow;
	}

div.ok span.char
	{
	font-size:40px;
	background-color: lightgreen;
	}

div.color > span.char
	{
	font-size:40px;
	background-color: orange;
	}
div.color > span.char > span.bar
	{
	font-size:40px;
	background-color: cyan;
	}
div.color > span.char > span.triangle
	{
	font-size:40px;
	background-color: lightgrey;
	}

NO SPACE-SEPARATOR<br> between (&#x2BC7; &#x2BC7;) and between (&#x2503;&#x25C6;)

<div class='error'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>

SPACE-SEPARATOR<br> between all &lt;span class='char'&gt;

<div class='ok'>
    <span class='char'><span class='bar'>&#x2503;</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'><span class='triangle'>&#x2BC8;</span><span class='bar'>&#x2503;</span></span>
    <span class='char'>&#x25C6;</span>
</div>

NO SPACE-SEPARATOR with colors

<div class='color'>
    <span class='char'>
        <span class='bar'>&#x2503;</span>
        <span class='triangle'>&#x2BC7;</span>
    </span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'>
        <span class='triangle'>&#x2BC8;</span>
        <span class='bar'>&#x2503;</span>
    </span>
    <span class='char'>&#x25C6;</span>
</div>