I was doing an organization on some code here before commitar and realized that an indentation in HTML caused a problem in my layout, so I went to inspect to find out what I had done wrong besides indenting, and found that the line breaks for indentation they ended up increasing the space between 2 elements.

Here is an example that demonstrates the same indented and inline html structure (also here ):

<div style="font-size: 44px;">
  <span>28.3</span>
  <span>km</span>
</div>

<div style="font-size: 44px;"><span>28.3</span><span>km</span></div>

Questions:

• Why does this occur?
• How to indent my code and not have this space?

According to W3 , all of the characters below are considered whitespace.

• ASCII space (   )
• ASCII tab (% with%)
• ASCII form feed ( 	 )
• Zero-width space (  )

A line break is defined as ​ ( Carriage return ) and 
 ( Line Feed ). And that also makes it a blank space.

The ISO-8879 specifies that a line break immediately following a start mark should be ignored, as well such as a line break just before the closing of a tag .

  

Note 1: Although there is a blank + line break (which is also considered white space), the browser ends up condensing those characters. It is the same as 
 and output is a b

  

Note 2: Note that browsers interpret all HTML elements except a b and elements with css <pre> .

    References:
    ¹ link
    ² link

In reality it is exactly because of the indentation that occurs the spacing, because if you observe well is being generated a space, the browser rendering html engine ignores the additional spaces (when there is more than 1 space), but still the first one is rendered, the ideal when you do not want the space to be placed on the same line:

<div style="font-size: 44px;">
  <span>28.3</span><span>km</span>
</div>

This eliminates the problem.