时间戳

首页 > 解决方案 > 当元素不在 1 行时，为什么 HTML 元素之间的空格分隔符不存在？

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

问题描述

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

在此处输入图像描述

为什么 (⯇ 和 ⯇) 之间和 (┃ 和 ◆) 之间不存在空格分隔符（参见yellowunicode）？

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

区别仅与 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>

标签： htmlcssspaceseparator

解决方案

谷歌浏览器会忽略 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>

推荐阅读