代码之家 › 专栏 › 技术社区 › 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

推荐文章

Sarah Marie · 单击按钮,用随机颜色/大小将每个字母设置为字符串样式

2 年前

narb · 如何根据xcode中的屏幕大小定义按钮的字体

7 年前

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

7 年前

nuuse · itextsharp仅在空格上自动调整字体大小和换行符

7 年前

mitchmitch24 · 是否更改Power BI中的默认字体大小?

7 年前

Alex Nevado · 为什么在将HTML传递到HTML组件(hc:HTML)时忽略字体大小?

7 年前

Egor Kolyshkin · 如何在不考虑设备方向的情况下自动设置UIButton的字体大小更改?

7 年前

adi518 · 计算手机的CSS字体大小

7 年前

Gozie · Django fontsize tinymce

7 年前

James · 使用我的网站上的按钮更改h1/h2/h3的字体大小(使用本地存储)

8 年前