为何span元素的line-height样式被忽略？小于1.5失效大于则生效

问题代码 #

CSS：

body {
  line-height: 1.5;
}

HTML：

<div style="width: 350px">
  <span style="line-height: 1.1">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </span>
</div>

现象描述 #

• 实际渲染的行高是1.5（body设置的值），而非span定义的1.1；
• 开发者工具中body的line-height被划掉（显示span的1.1已覆盖继承值），但实际效果还是1.5；
• 当span的line-height大于1.5时能正常生效，小于1.5则被忽略；
• 将line-height:1.1设置到外层div上，行高就能正常显示为1.1。

原因解析 #

这是CSS行框盒子（line box）的渲染机制导致的：

1. 块元素的line-height定义内部行框的最小高度
   body是块元素，它的line-height:1.5会被div继承（因为div未单独设置line-height）。作为块元素，div的line-height会为其内部的行框盒子设定一个最小高度阈值。

2. 内联元素的line-height受父块最小高度限制
   span是内联元素，它的line-height用于计算自身的上下行距，但行框盒子的最终高度不能低于父块div设定的最小高度。当span的line-height（1.1）小于这个阈值（1.5）时，行框盒子会强制保持1.5对应的高度，所以视觉上还是显示1.5的行高；而当span的line-height大于1.5时，行框会被撑大到span的line-height高度，此时就能看到预期效果。

3. 设置到div生效的原因
   给div设置line-height:1.1后，div为内部行框设定的最小高度阈值变成了1.1，和span的line-height一致，行框盒子的高度就由这个值决定，因此能正常显示1.1的行高。

另外要说明：开发者工具里“划掉body的line-height”只是表示span的line-height覆盖了继承值，但行框高度的限制来自父块div的line-height（继承自body），这才是视觉上没变化的核心原因。

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