html - 为什么 font-size : 1em; *increase* the size of content?

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.