Почему div на следующей строке дает немного пробела?

Question

Когда я устанавливаю div на новую строку, я получаю небольшое пробел между двумя div. Зачем? Смотрите эту jsfiddle example, со следующим кодом:

<div>Welkom</div> 
<!--onclick == javascript load projects--> 
<div class='menu'>Menu <br /> 
    <div class='item'>Projects</div> 
    <div class='item'>Users</div> 
</div><div class='main'><--Click a menu item</div> 

И это CSS:

*{ 
    padding:0px; 
    margin:0px; 
} 
html, body{ 
    width: 100%; 
    height: 100%; 
} 

.menu{ 
    width: 20%; 
    display:inline-block; 
    background-color:green; 
} 
.main{ 
    width: calc(80% - 5px); 
    display:inline-block; 
    background-color:red; 
} 

В примере вы видите, что DIV с классом main непосредственно после закрывающего тега для DIV меню. когда я помещаю его на следующую строку и запускаю его снова, я получаю небольшое пробел между div. Может кто-нибудь объяснить, почему это происходит?

Answer 1

Есть пробелы там :) Одно из решений состоит в написании HTML как это:

<div>One<div><!-- 
--><div>Two</div><!-- 
--><div>Three</div> 

Так что не будет никаких пробелов в браузере, потому что они прокомментированы.