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