Css em边距不正确

我对em单位有些问题

我的基本电磁单元是16px

body {
    font-size:16px;
}

我试着给我的h4元素30px的余量

所以30px等于1.87em

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

但当我从网页上看的时候

margin-top:56.1px;

计算

当我用px代替em时，比如页边页眉：30px； 一切正常

---

为什么会出现这个问题

IMHO，你不应该把em计算成像素，但我知道这有助于你理解你在做什么。所以本体论….

您正在定义身体上的基本尺寸

16px

您可以为自己定义一个字体大小h4，

1.875em

，这意味着：

1.875x16=30px

这些

30px

现在是h4的基本尺寸

也就是说，您在h4上定义的页边距顶部实际上是

1.87 x 30=56.1px

因此，如果您想要一个“30px边距”，请在h4上使用

margintop:1em

希望它有意义

---

---

正如李斯特先生已经评论的那样，作为替代方案，您可以使用

rem

而不是

em

在

h4

上的

em

等于

h4

的字体大小，而不是基本字体大小。你的意思可能是rem。不，我的意思是em，我现在没有，h4上的em等于h4em的基本字体大小。我认为您的基本h4字体大小更大。我给body指定了基本字体大小，并仔细考虑了所有计算结果。@tamilselvan是的，OP的数据清楚地显示h4的字体大小为30px。我理解，如果给元素的字体大小与基本字体大小不同，我的1em值会改变这个元素，如果我给我的h4元素字号，基本字号，比如16px（1em），一切都很好。这是正确的。

em

的使用迫使人们产生一种不同的心态：）