Why does the browser renders a newline as space?

Solution 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.)

Solution 2:

Whitespace between block elements are ignored. However, whitespaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element.

Consider the following example:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

In the ideal case, you want the user to see

This is my colored Hello World example

Removing the whitespace between the two spans however would result in:

This is my colored HelloWorld example

But that same sample can be rewritten by an author (with OCD about the HTML formatting :-)) as:

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

It would be better if this was rendered consistently with the previous example.

Solution 3:

HTML is specified to do it like that:

Line breaks are also white space characters

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1