display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

首先看一下我出现的问题如下图：

如上图所示，我的导航栏是由三部分组成的，三部分样式如下：

.logo{ /*红框*/
	position: relative;
	display: inline-block;
	width: 15%;
	line-height: 80px;
	vertical-align: middle;
}

.nav{ /* 导航*/
	position: relative;
	display: inline-block;
	top:0px;
	width: 70%;
	line-height: 80px;
	text-align: center;
	overflow: hidden;
	vertical-align: middle;
}

.loginbar{ /* 登录框*/
	position: relative;
	display: inline-block;
	width: 14%;
	line-height: 80px;
	vertical-align: middle;
}

下面的div则是display:block的，这就比较尴尬了，两者都没有设置border，padding，margin也都是0，怎么会有间隙呢

解决方案就是把上面三个属性都加上 height:80px;

至于为什么不设置height会影响两者之间的间距，原理还是没有弄懂，有大神可以帮忙解释下。

还有为什么display:inline-block之后需要把两个元素之间加上<!-- -->要不然就会元素之间就会出现空格呢？