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

Question

在下面的示例中，我惊讶地发现将font-size: 1em添加到<button>元素会导致内容大小增加

example on codepen: "button font-size 1em increases?"

<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;

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

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