为什么我的 em 边距计算不正确？

Question

我对 em 单位有一些问题。

我的基本 em 单位是 16px

body {
    font-size:16px;
}

我尝试为我的 h4 元素提供 30px margin-top，所以 30px 等于 1.87em，

h4 {
    font-size:1.875em;
    line-height: initial;               
    margin-top: 1.87em;
}

但是当我从 Web Inspector 计算部分查看时：

margin-top:56.1px;

计算出来。

当我使用px而不是em时，像margin-top:30px;一样，一切正常。

为什么会这样？

Answer 1

恕我直言，你不应该将 em 计算为像素，但我知道它可以帮助你理解你在做什么。所以主题....

您正在 body 16px

上定义 基本尺寸

你定义一个font-size给你h4，1.875em表示：1.875 x 16 = 30px.
这些 30px 现在是您的 h4 的 基本大小 。

也就是说，你在h4上定义的margin-top实际上是1.87 x 30 = 56.1px

因此，如果您想要“30 像素边距”，请在您的 h4 上使用 margin-top: 1em。

希望它有意义....

正如 Lister 先生所评论的那样，您可以使用 rem 代替 em

Why are my em margins not computing correct?