为何设置font-size的两个span下子div的字体大小继承表现不一致

问题原因解析 #

1. 核心原因：两个span的字体单位不统一 #

你给两个父级span设置的font-size使用了完全不同的单位，本身实际渲染的字体大小就存在1.3倍左右的差异：

• #span1使用px（像素）作为单位，40px就是固定40像素的字体大小
• #span2使用pt（印刷点）作为单位，pt是面向印刷场景的绝对长度单位，在Web标准默认96DPI的显示设备下，换算关系为1pt = 96/72 ≈ 1.333px，因此40pt换算为像素就是40 * 1.333 ≈ 53.3px，刚好就是你观测到的1.3倍差值。

你看到的“继承异常”属于误解：子div完全正确继承了父元素计算后的实际像素值，只是你把#span2的设置值40pt直接和子元素的像素计算值做了对比，才会误以为继承比例不对。你只要把两个span的单位统一为同一种（比如都用px），两者的继承表现就会完全一致。

2. 额外注意点：HTML嵌套语法不规范 #

span属于行内元素，按照HTML规范不允许嵌套div这类块级元素，浏览器解析这类非法嵌套代码时可能会自动调整DOM结构，部分场景下也可能引发额外的样式异常，建议把外层容器替换为div这类块级元素。另外你提供的代码末尾存在两个多余的</div>闭合标签，也属于语法错误建议修正。

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