为何inline-block容器中img与div子元素引发父容器对齐差异？

我无法理解为何在inline-block元素中，img元素对父容器的影响与其他元素存在差异，元素层级结构如下：

• element 1
  • element 2（display: inline-block）
    • div 或设置为display:block的img

示例代码如下：

<div style="border:1px solid">xjt
  <div style="border:1px solid;height:200px;display:inline-block">
    <img style="display:block;height:200px" src="https://www.w3schools.com/html/pic_trulli.jpg" />
  </div>
</div>

<div style="border:1px solid">xjt
  <div style="border:1px solid;height:200px;display:inline-block">
    <div style="height:200px">zzzz</div>
  </div>
</div>

上述两个案例中，一个子元素是div，另一个是设置为display:block的img，为何上层容器div对element2（即inline-block的div）的对齐方式不同？这不符合我的预期。

我知道inline-block元素在渲染时底部可能会有边距，但为何两个案例的表现不一致？我认为子元素不应对其父元素产生此类影响。

内容的提问来源于stack exchange，提问作者Daniel van Mil