父inline元素尺寸如何确定？span嵌套img尺寸不符问题咨询

首先要区分两个容易混淆的核心概念：

• 非替换inline元素的自身尺寸：比如<span>这类元素，它的高度由自身的line-height属性决定，宽度则由内容的水平占用范围决定。
• line box（行框）：行框是包裹一行内所有inline-level内容的容器，它的高度由该行内最高/最低元素的垂直范围共同决定，但它不会直接成为父inline元素的自身尺寸。

回到你的代码示例：

<span>   <img src="00f.jpg"></span>

这里的<img>是替换元素，它的尺寸固定为450x500，会把所在行的line box高度撑开至500px，但<span>作为非替换inline元素，它的高度由继承的line-height计算而来（默认情况下body的line-height对应约21px，所以你看到的span高度是这个值）。

你忽略的关键要点：

• 非替换inline元素的高度不直接由子元素或line box的高度决定，它只反映自身文本基线区域的高度，由line-height属性控制。
• 替换元素（比如img）只是在行框内布局，会影响行框的高度，但不会改变父级非替换inline元素的自身尺寸。

如果希望span的尺寸和内部img一致，有两种常用方法：

• 将span设置为inline-block或block：display: inline-block;，此时它的尺寸会由内部内容（包括img）自动撑开。
• 手动设置span的line-height等于img的高度（500px），让span的高度匹配行框高度。

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