html - 为什么下一行的 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;
}

在示例中，您看到带有 main 类的 div 紧跟在菜单 div 的结束标记之后。当我把它放在下一行并再次运行时，我在 div 之间得到了一点空白。有人可以解释为什么会这样吗？

Answer 1

那里有空格:)一种解决方案是像这样编写 html:

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

所以在浏览器中不会有空格，因为它们被注释了。