em邊距不正確

Question

我對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時，例如margin-top：30px; 一切正常。

為什么這個問題發生了？

Answer 1

恕我直言，您不應該將em計算為像素，但是我了解它可以幫助您了解自己在做什么。 如此ontopic。

您正在為自己的身體16px 基本尺寸 16px

您為h4定義了一個字體大小，即1.875em ，這意味着： 1.875 x 16 = 30px 。
這30px現在是h4的基本尺寸 。

意思是，您在h4上定義的邊距頂部實際上是1.87 x 30 = 56.1px

因此，如果您想使用'30px的邊距'，請在h4上使用margin-top: 1em 。

希望有道理....

---

正如Lister先生已經評論過的，作為替代，您可以使用rem代替em