HTML img 与其他元素对齐

Question

我无法理解为什么 img 元素对父容器的影响与内联块元素中的另一个元素不同，请参阅要点：https://lit.dev/playground/#gist=ee3df72177ce824545c18c1acd4a4ba3

• 元素1
  • 元素2
    • div 或 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，另一种带有 img（显示块）。为什么上层容器 div 在这两种情况下以不同的方式对齐“元素 2”？我没想到会这样。

我知道由于内联块显示内容可以在底部带有边距来呈现，但是为什么在这两种情况下这不一样，因为我不希望 HTML 元素的子元素具有这样的边距对它的父母有影响吗？

Answer 1

为了回答你的问题，上层容器 div 在这两种情况下以不同的方式对齐“元素 2”，因为 img 元素和字符串“zzz”具有不同的大小。如果“zzz”与 img 元素的大小相同，那么在“one with a div”的情况下，字符串“xjt”将被推到底部，两种情况都会有相同的结果。

您可以这样修改代码：

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