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;
    }

但是当我从网络检查员计算部分看时，有，

margin-top:56.1px;

来计算。

当我使用px代替em时，像margin-top：30px; 一切正常。

为什么会出现这个问题？

Answer 1

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

您正在身体16px

上定义基本尺寸

您为h4定义了字体大小，1.875em表示：1.875 x 16 = 30px 这些30px现在是h4的基本尺寸。

意思是，您在h4上定义的margin-top实际上是1.87 x 30 = 56.1px

因此，如果您想要'30px保证金'，请在您的h4上使用margin-top: 1em。

希望它有意义......

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