inline-block元素下移求助：含文本的div无法与其他div顶部对齐

问题原因 #

设置display: inline-block的元素默认采用基线对齐规则：带有文本的div基线是文本的基线，而空div的基线是元素自身的底部，这就导致带文本的div出现下移，无法和空div顶部对齐。

解决方案 #

给所有div添加vertical-align: top属性，强制元素以顶部为对齐基准，就能解决错位问题。

修改后的CSS代码：

div {
  height: 200px;
  width: 200px;
  background-color: olivedrab;
  border: 5px solid black;
  display: inline-block;
  margin: 50px;
  vertical-align: top; /* 添加这行 */
}

HTML代码保持不变：

<div>Hey you</div>
<div></div>
<div></div>

关于之前尝试的absolute方案问题 #

使用position: absolute会让元素脱离正常文档流，后续元素会无视它的占位，自然会出现重叠，这显然不是解决对齐问题的正确思路。

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