为何设置display:inline-block的DIV有无内容时显示表现不一致？

这是CSS规范定义的标准渲染逻辑，不是浏览器bug，本质是行内级元素默认的基线对齐规则导致的：

• 所有inline、inline-block类型的行内级元素，默认垂直对齐规则是vertical-align: baseline，即元素要对齐父容器的基线位置。
• 若inline-block元素内部存在正常流的内容（比如文本、非浮动/定位的子元素），它的对齐基线取内部最后一行正常流内容的基线：最常见的场景就是内部有文字时，盒子会往下偏移，让内部文字的基线和同行其他内容的基线对齐。
• 若inline-block元素内部没有任何正常流内容，它的对齐基线会直接回退到元素自身的下外边距边界，也就是盒子的最底部边缘。

两种场景下元素用来对齐父基线的参考点完全不同，视觉上就会出现明显的高低差：空盒子直接把底边贴在父基线上，带内容的盒子要把内部文字的基线贴在父基线上，自然会比空盒子低一截。

可以用下面的最小可运行代码复现这个效果：

<style>
.container {
  background: #f5f5f5;
  font-size: 48px;
  line-height: 1.5;
}
.ib-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #3b82f6;
}
</style>
<div class="container">
  对齐测试
  <div class="ib-box">文本</div>
  <div class="ib-box"></div>
</div>

要消除这个错位非常简单，不需要给空盒子加占位符（比如 ），只要给所有同排的inline-block元素统一设置vertical-align属性，绕开默认的baseline对齐即可，常用取值为top/middle/bottom：

.ib-box {
  display: inline-block;
  vertical-align: top; /* 所有盒子统一顶对齐，错位直接消失 */
  width: 100px;
  height: 100px;
  background: #3b82f6;
}

该规则出自CSS2.1规范第10.8.1节「Leading and half-leading」章节，所有现代浏览器均按此标准实现，不存在兼容性问题。

内容的提问来源于stack exchange，提问作者Aadarsh Bishen