为什么font-size：1em; *增加* <button>内容的大小？

Question

给定以下示例，我很惊讶地发现，添加font-size: 1em到<button>元素会导致内容大小增加

codepen上的示例：“按钮字体大小1em增加了吗？”

<p>normal</p>
<p style="font-size: 1em;">normal</p>

<button>normal</button>
<button style="font-size: 1em;">big?</button>

我期望两个按钮的大小一样，如段落所示。为什么一个按钮比另一个大？

Answer 1

Chrome中给定元素的默认样式包含以下内容：

font: 400 11px system-ui;

大多数其他浏览器都有类似的细节，留给读者。

通过将font-size设置为1em，您可以将其设置为从父级继承的默认字体大小，或者如果不存在，则设置为浏览器设置，默认为16px。