为何设置display:inline-block的两个div因边框不同出现错位？

我设置了两个display: inline-block、box-sizing: border-box的div（id分别为d3和d4），二者宽高均为150px，仅边框宽度不同。但渲染时d4顶部出现空白且与d3错位，请问该现象的原因是什么？

代码示例 #

CSS代码

.myContainer {
  display: block;
}

#d3 {
  width: 150px;
  height: 150px;
  border: 5px solid #aef704;
  padding: 25px;
  background-color: blueviolet;
  box-sizing: border-box;
  display: inline-block;
}

#d4 {
  width: 150px;
  height: 150px;
  border: 2px solid #aef704;
  padding: 25px;
  background-color: brown;
  box-sizing: border-box;
  display: inline-block;
}

HTML代码

<html lang="en">

<head>
</head>

<body>
  <div class="myContainer">
    <div id="d3">test content d3</div>
    <div id="d4">test content d4</div>
  </div>
</body>

</html>

渲染效果 #

这是inline-block元素默认的垂直对齐规则导致的问题：

• inline-block元素默认的vertical-align属性值为baseline，即按文本基线对齐。
• 两个div内部都有文本内容，浏览器会以文本的基线作为对齐基准。
• 由于d3的边框宽度（5px）比d4（2px）宽，两个元素的文本基线相对自身元素的垂直位置存在差异，最终造成视觉上的错位和顶部空白。

简单来说，就是两个元素按文本基线对齐，但边框宽度的差异让元素整体位置发生了偏移。

内容的提问来源于Stack Exchange，提问作者Habil Harati