为何h1设置padding:2em后实际值为64px？预期为16px*2

你观察到的2em padding最终渲染为64px的结果，完全符合CSS规范，没有计算偏差，核心逻辑如下：

• em单位的规则分场景：
  • 如果把em用在font-size属性上，数值会基于父元素的字号计算；
  • 如果把em用在padding、margin、尺寸等其他属性上，数值会基于当前元素自身最终计算得到的font-size值换算，不会固定绑定16px的基准值。
• 你没有主动覆盖h1的浏览器默认样式，常规桌面浏览器的内置样式表会给h1设置默认的大字号：常规是font-size: 2em，这个值基于父元素body的默认16px字号计算，最终h1的实际渲染字号为16px * 2 = 32px。

把这两个值代入计算：你给h1设置的padding: 2em，会按h1自身32px的字号基准换算，最终得到32px * 2 = 64px的实际内边距，和你看到的渲染结果完全一致。

验证方式：打开浏览器开发者工具，选中h1元素查看计算样式面板，能直接看到h1的最终字号为32px、最终内边距为64px，和上述计算链完全匹配。

如果你希望2em最终按16px*2的基准计算为32px的内边距，可根据需求选择任意一种方式修改：

• 主动给h1设置明确字号：添加font-size: 16px，此时h1自身字号为16px，2em的padding会自然换算为32px；
• 不修改h1默认大字号的前提下，直接用px单位指定内边距：将padding改为padding: 32px，数值不受元素自身字号影响；
• 使用相对根元素字号的rem单位设置内边距：将padding改为padding: 2rem，由于html根元素的默认字号为16px，计算结果固定为32px，不会被h1自身的大字号干扰。

完整测试代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    h1 {
      margin: 0;
      background-color: blue;
      padding: 2em;
    }
  </style>
</head>
<body>
  <h1>Title</h1>
</body>
</html>

页面实际渲染效果：

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