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

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

.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之后需要把两个元素之间加上<!-- -->要不然就会元素之间就会出现空格呢？