html - Why does the browser renders a newline as space?

Question

For the longest time, I have wanted to understand why the browser adds an empty space between rendered HTML elements when there is a NewLine between them, for example:

<span>Hello</span><span>World</span>

The html above will output the “HelloWorld” string without a space between “Hello” and “World”, however in the following example:

<span>Hello</span>
<span>World</span>

The html above will output a “Hello World” string with a space between “Hello” and “World”.

Now, I have no problem accepting that this is just the way it works period, but the thing that bugs me a little is that I was always under the impression that spaces (or newlines) between the html elements would not matter at the time when the browser rendered the html to the user.

So my question is if anyone knows what the philosophical or technical reason behind this behavior.

Thank you.

Answer 1

Browsers condense multiple whitespace characters (including newlines) to a single space when rendering. The only exception is within <pre> elements or those that have the CSS property white-space set to pre or pre-wrap set. (Or in XHTML, the xml:space="preserve" attribute.)