为何设置为inline-block的article元素未处于同一行？

section容器内包含三个article元素，为article设置display: inline-block后，三个元素未处于同一行，第二个元素发生下移（截图如下）：

相关代码片段：

CSS代码 #

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
}
body {
  background: #F9FBFD;
}
article {
  width: 333px;
  height: 432px;
  background: #FFF;
  display: inline-block;
  /* vertical-align: top; */
}
article h3 {
  font-size: 18px;
  line-height: 22px;
  color: #393737;
}
article p {
  font-size: 15px;
  line-height: 24px;
  color: #B5B7C7;
}

HTML代码 #

<p>Our blog posts</p>
<section class="posts">
  <article>
    <img src="https://picsum.photos/200/300" alt="MSPTA">
    <h3>2021 Mid-South Parking and Transportation (MSPTA) Conference</h3>
    <p>September 21, 2021</p>
  </article>
  <article>
    <img src="https://picsum.photos/200/300" alt="PIE">
    <h3>2021 Parking Industry Expo (PIE)</h3>
    <p>September 21, 2021</p>
  </article>
  <article>
    <img src="https://picsum.photos/200/300" alt="MSPTA">
    <h3>2021 International Parking & Mobility Institute (IPMI) Conference</h3>
    <p>September 21, 2021</p>
  </article>
</section>

inline-block元素默认的垂直对齐方式是baseline（基线对齐），当不同article内部的文本内容高度不一致时（比如第二个article的h3文字行数更少，基线位置与其他两个不同），就会触发基线对齐规则，导致元素出现错位下移的情况。

给article元素设置vertical-align: top;（取消代码中对应行的注释即可），也可以设置vertical-align: middle或vertical-align: bottom，都能让三个元素对齐在同一行：

article {
  width: 333px;
  height: 432px;
  background: #FFF;
  display: inline-block;
  vertical-align: top; /* 启用这行 */
}

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