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

Question

Given the following example, I was surprised to find that adding font-size: 1em to a <button> element causes the size of the content to increase 在下面的示例中，我惊讶地发现将font-size: 1em添加到<button>元素会导致内容大小增加

example on codepen: "button font-size 1em increases?" codepen上的示例：“按钮字体大小1em增加了吗？”

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

I was expecting the two buttons to be the same size, like the paragraphs. 我期望两个按钮的大小一样，如段落所示。 Why is one button bigger than the other? 为什么一个按钮比另一个大？

Answer 1

The default style for the given element in Chrome contains the following: Chrome中给定元素的默认样式包含以下内容：

font: 400 11px system-ui;

Most other browsers have something similar, details left to the reader. 大多数其他浏览器都有类似的细节，留给读者。

By setting the font-size to 1em , you're setting it to the default font-size inherited from the parent, or if none exist, your browser settings, which by default is 16px . 通过将font-size设置为1em ，可以将其设置为从父级继承的默认font-size；如果不存在，则将其设置为浏览器设置（默认为16px 。

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

问题描述

1 个解决方案

解决方案1
6 2019-04-18 01:42:38

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

问题描述

1 个解决方案

解决方案1 6 2019-04-18 01:42:38

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

解决方案1
6 2019-04-18 01:42:38