代码之家 › 专栏 › 技术社区 › user3348410

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

font-size pixel css

user3348410 · 技术社区 · 7 年前

我对电磁装置有一些问题。

我的基本电磁单元是16px

body {
    font-size:16px;
}

我试着给我的h4元素30px的余量,所以30px等于1.87em,

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

但当我从web检查器计算部分看时:

margin-top:56.1px;

计算。

当我使用 px 而不是 em 喜欢 margin-top:30px; ,一切正常。

为什么会这样?

1 回复 | 直到 3 年前

GreyRoofPigeon 7 年前

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

您正在定义 基本尺寸 在你身上 16px

您为自己定义了一个字体大小h4, 1.875em 这意味着: 1.875 x 16 = 30px .
这些 30px 现在是 基本尺寸 对于您的h4。

也就是说,您在h4上定义的边距顶部实际上是 1.87 x 30 = 56.1px

因此,如果你想要一个“30px的余量”,使用 margin-top: 1em

希望它有意义。。。。

正如李斯特先生所说,作为替代方案,您可以使用 rem 而不是 em

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前