为何<body>设1.5em后，子元素1.3em字体反而更大？

核心问题：em单位的相对性 #

em是相对单位，它的尺寸基于父元素的字体大小计算：

• body设置的font-size:1.5em，是相对于浏览器默认字体大小（通常16px），所以body字体大小为 16px × 1.5 = 24px。
• <p>元素继承了body的24px字体大小。
• .pathlink的font-size:1.3em是相对于父元素<p>的24px计算，最终尺寸为 24px × 1.3 = 31.2px，这比body的24px大，所以视觉上更显眼，和你的预期相反。

解决方法 #

有两种直接的修正方式：

• 改用rem单位：rem是相对于根元素（<html>）的字体大小，不受父元素层级影响。如果想让.pathlink文字比body的1.5em小，可以设置font-size: 0.87rem（因为0.87 × 1.5 ≈ 1.3，对应你原本想设置的相对比例）。
• 用calc计算相对值：如果坚持用em，可设置font-size: calc(1.3 / 1.5)em（约等于0.87em），这样.pathlink的尺寸会基于body的1.5em反推，最终比body字体小。

修正后代码示例 #

使用rem的CSS：

html {
  font-size: 16px; /* 可明确根元素字体大小，也可使用浏览器默认值 */
}
body {
  font-family: "Times New Roman", Times, georgia, serif;
  font-size:1.5em;
  line-height: 1.3em;
}
.pathlink {
  font-size: 0.87rem;
}

使用calc的CSS：

body {
  font-family: "Times New Roman", Times, georgia, serif;
  font-size:1.5em;
  line-height: 1.3em;
}
.pathlink {
  font-size: calc(1.3 / 1.5)em;
}

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