rem 不输出相对于 body 字体的值，em 工作正常

Question

我有以下部分，我需要大约 85px.

的顶部填充和底部填充

所以我的部分如下所示：

我的 body 元素的 font-size 为 16px，因此我将以下样式应用于填充部分：

.careers-highlight-contact-section {
    padding-top: 5.31rem;
    padding-bottom: 5.31rem;
}

我得到 5.31 的方式是 85/16，但现在当我检查计算值时，我看到 padding top 和 padding bottom 实际上是 53px。它是如何得出这个值的？

你可以在这个 link here.

上看到这个错误

如果您将填充值从 rem 更改为 em，那么您将获得正确的高度。为什么会这样？

Answer 1

rem 是相对于默认大小的，默认大小由浏览器或您定义，但不在 body 的 CSS 规则中，而是在 body 的规则中html。

您的计算和结果适合默认大小 16px，这是大多数浏览器中的默认字体大小。如果您为 html 定义不同的字体大小，填充应该改变。

Answer 2

如果参考W3C规范，rem单位定义为：

Equal to the computed value of ‘font-size’ on the root element.

When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.

因此，根据我的评论，rem 的计算基于根元素上声明的字体大小，即 <html> 元素而不是 <body> 元素。只要您在前者上声明 font-size: 16px，您就会看到将计算出正确的填充。

rem 不输出相对于 body 字体的值，em 工作正常

rem not outputing value relative to body font , em works fine

css

font-size