CSS内联元素包含内联替换元素时span高度异常问题咨询

代码示例 #

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

现象展示 #

问题说明 #

已知img宽度为300px、高度为200px，作为span的子元素，但span高度仅为21px，并非预期的200px或更高。

原因解答 #

根据W3C规范第10.6.1章节的定义：内联非替换元素的内容区域高度基于字体计算。span属于内联非替换元素，它的高度由自身字体相关属性决定，而非子元素的尺寸，因此即使内部包含大尺寸的img，span的高度也不会随之拉伸。

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