NewLine in HTML editor leaves a space in website

Question

How can i use newlines in editor without having annoying spaces in my template?

There is an example of what i mean:

<nav id="navbar">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav> 

Fiddle1: newlines = annoying spaces

<nav id="navbar">
<ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
</nav>

Fiddle2: no newlines = perfect result

Answer 1

You could add float: left;

#navbar ul li {
    float: left;
}

Fiddle: http://jsfiddle.net/zo492g3y/1/

A complete guide removing white space between inline-blocks could be found at: Fighting the Space Between Inline Block Elements.

Answer 2

use HTML comment, is another option if you want your code to be readable

<nav id="navbar">
<ul>
    <li><a href="#"></a></li><!--
    --><li><a href="#"></a></li><!--
    --><li><a href="#"></a></li><!--
    --><li><a href="#"></a></li>
</ul>