Почему разделитель пробелов между элементами HTML <span>отсутствует, а элементы <span>не находятся в 1 строке? - PullRequest
Новая
       63

Почему разделитель пробелов между элементами HTML <span>отсутствует, а элементы <span>не находятся в 1 строке?

0 голосов
/ 01 мая 2020

Я написал небольшой код HTML/CSS, который отображает следующее изображение на Chrome

enter image description here

Почему между пробелами (⯇ и ⯇ ) и между (┃ и ◆) нет (см. yellow Unicode)?

И почему, когда все <span> в <span class='char'> находятся в одной строке, разделение пробела ВСЕ видны (см. green Unicode)?

Разница только в том, как код HTML записан в файл, больше ничего! Код CSS полностью идентичен (был изменен только цвет фона).

Чтобы облегчить анализ случая yellow, я поместил третий блок c с большим количеством цветов.

Код 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>

1 Ответ

1 голос
/ 01 мая 2020

Google Chrome игнорирует все пробельные символы внутреннего и внешнего элемента в HTML, за исключением случаев, когда они находятся внутри текста. Все пробельные символы между текстом отображаются как единичные пробельные символы, но фактическое значение символа сохраняется. Это относится к обоим элементам, которые имеют встроенные или блочные стили отображения.

Каждый отдельный элемент, кроме последнего элемента элемента body, отображает пробел в конце, если он выбран с помощью тройного щелчка или перетаскивания. выбор. Это пространство отличается в зависимости от стиля отображения элементов.

Блочный элемент отображения приводит к добавлению к нему 2 символов CRLF, когда текст копируется, в то время как встроенный элемент отображения приводит только к 1 CRLF. Пробельные символы поддерживаются между копией и вставкой, но ограничены только одним символом.

, в то время как Firefox игнорирует пробелы внешнего элемента, но имеет интересные результаты с пробелами внутреннего элемента. Все пробельные символы преобразуются в пробелы, за исключением начального символа с ограничением в один пробел между каждым непробельным символом. Отображается и выбирается только последний пробел

Inline Display

Всегда есть пробел до и после текста, который копируется, независимо от того, что элементы содержат. Все пробельные символы удаляются.

Отображение блока

Пробельные символы перед текстом сохраняются как есть, а конечный пробельный символ преобразуется в пробел.

Итак, чтобы ответить на ваш вопрос, все это зависит от того, как браузеры реализуют отображение.

Чтобы исправить это, вы можете удалить все пробелы между вашими элементами, таким образом, просто уменьшите ваш 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>
...