替换行内元素下line-height最小值计算及div高度计算问题咨询

核心前置规则 #

块级元素包含行内内容时，高度由内部行盒的总高度决定，行盒高度计算遵循W3C行内格式化上下文（IFC）规范：

1. 每个行盒默认存在一个匿名文本支柱，该支柱完全继承父块级元素的字体、字号、行高属性，即使父元素内没有可见文本也会存在
2. 所有行内级元素默认采用vertical-align: baseline对齐：
   • 非替换行内元素（如span）的基线为自身文本的基线
   • 替换行内元素（如img）的基线为自身的底部边缘
   • 匿名文本支柱的基线由父元素的字体和字号决定
3. 行盒最终高度 = 行盒内所有行内级元素的最高顶部位置 到 最低底部位置的距离，不受父元素声明的line-height限制

场景1（img示例）高度计算逻辑 #

代码示例：

<div id="div20" style="font-family:Arial; font-size:50px;line-height:16px;">
  <img width="5" height="5">
</div>

计算过程：

• 匿名文本支柱继承属性：font-size:50px、line-height:16px，Arial字体下，50px字号的基线距离行盒顶部约为15px，距离行盒底部约为10px，二者相加刚好为25px
• img默认基线对齐，底部与支柱基线重合，5px高度的img完全落在15px的基线以上范围内，不会额外撑开高度
• 因此父div最终高度为25px，如果给img设置vertical-align: top，img顶部对齐行盒顶部，此时行盒高度就会等于父元素声明的line-height:16px

场景2（span示例）高度计算逻辑 #

代码示例：

<div id="div30" style="font-family:Arial; font-size:30px;line-height:16px;">
  <span style="font-size:10px">TEXT</span>
</div>

计算过程：

• 匿名文本支柱继承属性：font-size:30px、line-height:16px，计算半行距为 (line-height - font-size)/2 = (16-30)/2 = -7px
• 因此匿名支柱的内容区域顶部偏移为-7px，底部偏移为 -7px + 30px =23px
• 没有单独设置行高的span继承父元素line-height:16px，自身行内盒子高度仅16px，基线对齐后完全落在-7px到23px的范围内，没有超出
• 因此父div最终高度为23px - (-7px) =23px，和实测结果一致

替换行内元素对line-height最小值计算的影响 #

• 非替换行内元素的高度贡献始终为自身的line-height，只要行高固定，即使调整字号也不会带来过大的高度偏差
• 替换行内元素（img、video、input等）的高度贡献为自身的margin-box高度，默认基线对齐的规则下，如果替换元素的高度加上基线偏移量大于父元素声明的line-height，就会直接撑开行盒，导致父元素高度远大于声明的行高
• 如果要避免替换元素撑开父元素高度，给替换元素设置vertical-align: top/middle/bottom任意非baseline的对齐值即可，此时行盒高度就会等于父元素声明的line-height

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