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

提问者：小点点

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

img宽度为300px，高度为200px

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

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

规格说明

10.6.1内联、非替换元素

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

共1个答案

匿名用户

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

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>