css中，当行内元素包含行内替换元素时

Question

<div class="box">
  <span>
    <img src="https://picsum.photos/id/127/300/200" alt="" />
  <span/>
</div>

img 宽度为 300 像素，高度为 200 像素

img 是 span 的子元素，我不明白为什么 span 的高度只有 21px（不是 200px 或大于 200px）

---

我想我找到了答案，谢谢大家！

规格

10.6.1 内联、非替换元素

内容区域的高度应以字体为准

Answer 1

您需要设置图像的高度和宽度，并且可能希望 span 显示内联块。

 span { display: inline-block; } img { width: auto; height: auto; }

 <div class="box"> <span> <img src="https://picsum.photos/id/127/300/200" alt="" /> <span/> </div>