Why do line breaks between elements cause space between them?

Question

I was doing a few code organization here before commiting 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 ended up increasing the space between 2 elements.

Follow an example that demonstrates the same indented html and inline 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 happen?
• How to indent my code and not have that space?

Answer 1

According to the W3, all characters below are considered white space.

• ASCII space ( )
• ASCII tab (	)
• ASCII form feed ()
• Zero-width space (​)

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

To ISO-8879 specifies that a line break immediately after a start mark should be ignored, as well as a line break immediately before the closing of a tag.

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

Note 2: It is worth remembering that browsers interpret this way all HTML elements, except <pre> and elements with css white-space: pre.

---

^{References:
¹ https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
² https://www.w3.org/TR/REC-html40/struct/text.html#line-breaks}

Answer 2

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

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

This eliminates the problem.

Answer 3

Why does this happen?

This difference happens because, when displaying HTML, the browsers condense a sequence of blank characters (i.e. spaces, line breaks, etc) into a single space. This behavior is standard for any element that does not own the property white-space defined as pre or pre-wrap.

In fact, that’s why, if you want to display more than one space, you can’t just use the space characters ( ) in the markup, since, as we have seen, these are condensed. In this case, you can use several HTML entities   (non-breaking space). Behold:

body {
  font-family: monospace;
}

A&nbsp;&nbsp;&nbsp;&nbsp;B <br />
|----|

How to indent my code and not have that space?

To remove spaces between spans, you should find some way to remove (or hide) the blank characters that exist between them in HTML (the line breaks and indentation spaces).

One way to do this is simply not to indent them, as done in the first example:

<div>
  <span>1</span><span>2</span><span>3</span>
</div>

Another alternative is to use comments, as shown this answer soen:

<div>
     <span>1</span><!--
  --><span>2</span><!--
  --><span>3</span>
</div>

^{Note that now all blank characters (in the example, line breaks and spaces) are now part of the comment, not the markup that will be displayed by browser.}

If you can’t handle HTML, another option, using CSS, is to reduce the font size to zero for the <div> (which contains the spaces) and set the normal size for each <span>. Something like that:

.without-spacing {
  font-size: 0;
}

.without-spacing span {
  font-size: initial;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="without-spacing">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

^{Note that, in this last example, we are not actually removing the blank characters, but hiding them with this little ruse. If you select them and "copy", you will see that there is still a space between each element. Therefore, use this alternative for visual purposes only.}