为何rem计算结果不一致？求解释内部span字体大于外部code的现象

嘿，这个问题其实挺常见的，我来给你拆解一下：

首先得明确rem单位的核心逻辑：它是完全相对于根元素（也就是你代码里的:root，对应<html>标签）的字体大小来计算的。你设置了:root { font-size: 62.5%; }，如果浏览器默认字体是16px，那1rem就等于10px，1.6rem自然就是16px——理论上<code>和<span>的计算font-size应该一模一样才对。

那为什么你会看到差异？大概率是**浏览器的默认样式（用户代理样式表）**在搞小动作！

很多浏览器会给<code>这类代码标签加默认样式：比如Chrome、Firefox会默认给<code>设置font-family: monospace（等宽字体），但有些旧版浏览器或者特殊配置下，还会额外给<code>加font-size: smaller或者font-size: 0.8em这类相对值。虽然你自己写了font-size: 1.6rem，但如果浏览器的默认样式用了更具体的选择器（比如html code），优先级会更高，导致你的样式没生效。

另外还有一种可能：你把计算值（computed value）和视觉渲染大小搞混了。等宽字体（比如Consolas、Courier）的字符宽度比普通无衬线字体宽很多，哪怕font-size的数值完全一样，<span>继承了<code>的等宽字体后，视觉上会显得更大，但开发者工具里的computed数值其实是相同的。

怎么验证&解决？ #

• 先查样式来源：打开浏览器开发者工具，选中<code>元素，切换到Computed标签看font-size的数值，再到Styles标签看哪个样式在生效——如果是浏览器默认样式覆盖了你的1.6rem，那你可以用更具体的选择器（比如body code）或者!important强制覆盖：

  code {
    font-size: 1.6rem !important;
  }
  

• 消除视觉差异：如果计算值相同只是视觉上显大，那可以统一字体：

  code, span {
    font-size: 1.6rem;
    font-family: Arial, sans-serif; /* 或者指定你想要的字体 */
  }
  

• 彻底重置默认样式：用CSS reset清除所有浏览器默认样式，从根源避免这类问题：

  * {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
  }
  

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