Как angular удаляет пробелы между <span>s?

Question

Должен сказать, что не замечал этого до прошлой недели. Если у вас есть следующие HTML

<div>
    <span>A</span>
    <span>B</span>
</div>

DEMO

, он отображается как AB . Однако, если вы визуализируете то же самое в Angular, то пространство между A и B будет удалено. Я создал Stackblitz , чтобы продемонстрировать несколько случаев в Angular:

<h3>With normal space</h3>
<div>
  <span>A</span>
  <span>B</span>
</div>
<br>
<h3>  With &amp;ngsp;</h3>
<div >
  <span>A</span>&ngsp;
  <span>B</span>
</div>
<br>
<h3>With ngPreserveWhitespaces</h3>
<div ngPreserveWhitespaces>
  <span>A</span>
  <span>B</span>
</div>

DEMO

Я пытался проверьте HTML с помощью Chrome DevTools, но я до сих пор не понимаю, как это делается. Для всех случаев HTML / CSS идентичен. Во всяком случае, это, наверное, очень просто. Есть предложения?

Answer 1

По умолчанию свойство отображения диапазона - inline-block. Это создаст дополнительное пространство между элементами диапазона, поэтому нам нужно удалить его, указав font-size: 0 родительскому элементу. И вы должны указать размер шрифта для своих дочерних элементов. Как и здесь, я применил font-size:0; к родительскому элементу, т.е. div, и применил font-size:1rem; к дочерним элементам div.

div{
  font-size: 0;
}
div>span{
  font-size:1rem;
}

<div>
	<span>A</span>
	<span>B</span>
</div>

<span id="total">X</span>
<span id="max">Y</span>