为什么元素不在1行上，HTML 元素之间不存在空格分隔符？] >>

Question

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

为什么不存在（⯇和and）之间以及（┃和◆）之间的空格（请参见yellow unicode）？

为什么，当<span>中的所有<span class='char'>都在同一行中时，所有的空间分隔都是可见的（请参见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>

我写了一些HTML / CSS代码，在Chrome上显示以下图像，为什么（⯇和⯇）之间以及（┃和◆）之间不存在空间分隔（请参见黄色...

Answer 1

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