我创建了一个带有按钮 html 标记的按钮。现在我正在尝试在 em 中制作高度和宽度。我知道 16px 等于 1em。该规则适用于我目前看到的所有东西，除了按钮。如果我希望按钮高度为 45px，则按钮高度为 45px。如果我想将 45px 更改为 em，那就是 2.8125em。会短很多。为了使它接近 45px 与 em 它实际上是 3.5em 左右，在 px 中实际上是 56px。这是为什么？是浏览器的问题吗？顺便说一句，我正在使用 Safari。
【问题讨论】：
em 和 px 在您认为的意义上是不相等的。
标签： css
em 等于相关元素的字体大小。如果您的按钮的字体大小与 16px 不同，那么 em 也会不同。
您查看的所有元素的字体大小都必须设置为 16 像素。这并不奇怪，因为它是许多浏览器的默认设置。
【讨论】：
我知道 16px 等于 1em。
这是不对的。 unil 1em 不对应具体的像素值，它对应的是元素当前字体的字符大小。
默认情况下，按钮具有不同的字体。设置按钮的字体，它会得到你习惯的大小。
但是，如果您希望大小为特定数量的像素，则应使用px 单位而不是em。 em 单位在浏览器和操作系统之间可能会有所不同，即使您指定相同的字体系列和字体大小也是如此。
【讨论】：
其他人谈到了对 em 单位如何与像素相关的误解，但根本问题尚未得到充分解决。
我今天发布了同样的问题，它是 answered here by showdev。
本质上，按钮应用了“系统字体”，从而阻止它继承其父级的字体大小。据我所知，这在所有主要浏览器中都会发生，并且是“预期行为”。
为了克服这个问题，在你的 css 中，指定按钮标签（或者只是一个特定的按钮）应该明确地继承它们的字体大小：
button {
font-size:inherit;
}
这将使其将 em 大小视为与您正在处理的其他元素相同。当然，这也会改变上面文字的大小，这对你来说可能是也可能不是问题......
【讨论】：
按钮的 line-height 可能与其他元素的 line-height 不同，加上 1em 仅等于 16px，如果这是您设置的基础。很可能是这样，但我在你提供的描述中并不清楚，所以我只想指出这一点。
【讨论】：
从此页面about units in CSS：
em 和 ex 单位取决于字体，并且每个单位可能不同 文档中的元素。 em 就是字体大小。
更多关于em单元的信息来自The amazing em unit and other best practices：
多年来，“em”的含义发生了变化。并非所有字体都有 其中字母“M”（例如中文），但所有字体都有高度。 因此，该术语意味着字体的高度 - 而不是 字母“M”的宽度。
在 CSS 中，em 单位是测量长度的通用单位，例如 示例页边距和元素周围的填充。
最后是W3 specification的定义：
em 单位
等于使用它的元素的“font-size”属性的计算值。
【讨论】：
em 单位不仅仅是字体大小。这是基于字符大小的度量，因此即使指定相同的字体大小，不同的字体也会为em 提供不同的值。
1em 等于字体大小 默认等于 16px（浏览器默认字体大小选项）
示例
<button style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;">Text</button>【讨论】：