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

我对 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;，一切正常。

为什么会这样？

最佳答案

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

你正在为你的 body 定义一个基本尺寸 16px

您为 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

关于css - 为什么我的 em 边距计算不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47434064/