为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

就像这样

两个div高度相同，第二个我写了一个1当作 有内容吧，它就下沉了。。。

奇怪。。。

为什么有内容的就比没有内容的矮呢？ 如果都有内容就一样高，求大神解释下

最外层的div声明了text-align：center；属性。。。为了让里面的inline-block的div们可以居中。。。

最佳答案

1.框内有文字和没文字的区别，高度伸展的方向是不一样的。当有文字的时候，高度是向下扩展的，没文字的时候是向上扩展的。ps：这里涉及了line-height，vertical-align，height等相关属性，我的语文也不是特别好，所以也组织不上来，就只能这么简单讲一下而已。2.因为框的高度都一样，所以设置一下vertical-align就可以让3个框都在同一水平上，top,bottom,middle 都可以，高度不一样的时候就会有区别了。