Question

我有以下部分，我需要一个填充顶部和约85px的填充底部。

所以我的部分如下所示：

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

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

我得到5.31的方式是85/16，但现在当我检查计算值时，我看到填充顶部和填充底部实际上是53px。它是如何达到这个价值的？

您可以在此链接here上看到此错误。

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

Answer 1

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

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

Answer 2

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

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

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

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