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

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

这篇关于display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---