How does angular remove whitespaces between <span>s?

Question

I must say that I never noticed this until last week. If you have the following HTML

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

DEMO

It is rendered as A B . However, if you render the exact same thing in Angular that space between A and B is removed. I've created a Stackblitz to demonstrate a couple of cases in 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

I've tried to inspect the HTML with Chrome DevTools but I still don't understand how its done.For all cases the HTML/CSS is identical. Anyway, it's probably very simple. Any suggestions?

Answer 1

By default display property of span is inline-block. This will create extra space between the span elements so we need to remove that by giving font-size: 0 to the parent element. And you have to give font-size to your child elements. Like here i have applied font-size:0; to parent element ie div and applied font-size:1rem; to children span elements of 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>