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

Question

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

所以我的部分如下所示：

我的 body 元素有一个font-sizeof 16px，所以我将以下样式应用于填充部分：

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

我得到 5.31 的方式是 85/16，但是现在当我检查计算值时，我看到填充顶部和底部填充实际上是53px. 这个值是怎么来的？

你可以看到这个链接，这个错误在这里。

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

Answer 1

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

等于根元素上 'font-size' 的计算值。

当在根元素的 'font-size' 属性上指定时，'rem' 单位指的是该属性的初始值。

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