为什么我的 em 值在元素之间不一致？

Question

所以我在 "em" 值的大小一致方面遇到了问题，我似乎无法弄清楚原因。

我正在为我的站点使用 SCSS，并将我的所有 SCSS 文件预处理为单个 CSS 文件。

让我来说明我的结构是如何设置的。

/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */

.test {
 width: 5em;
 height: 5em;
 
 border-style: solid;
 border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
 width: 1em;
 height: 1em;
 
 border-style: solid;
 border-width: 0.15em; /* normally $defaultBorderWidth */
}

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
  <div class="test">
    <div></div>
  </div>
</body>
</html>

这反过来显示了我期望的结果，即两个 div 标签上的 2px 边框。我能够以完全相同的方式在我的网站上复制它。

我的问题是，在我的一些小部件中，有些情况下我的边框是 3px 而不是 2px。

我读到我的边框宽度可能与另一个属性值级联，但我终究无法弄清楚它发生的位置和原因。当我查看浏览器中的开发人员工具时，我发现所有 border-width 实例都是 0.15em。

如果无法确定解释/调试，我可以提供一个实时站点示例，期望在实时站点上对其进行更正（供以后阅读本文的人参考）。

Answer 1

since095 提供了使用 rem 而不是 em 的答案。其中 rem 始终使用 <html> 标签的根默认字体大小（您可以覆盖），相反 em 使用当前标签字体大小并相应地调整其他 em 值（有利于继承）。

两者各有优缺点，这实际上取决于您打算如何构建网站。继承很快就会变得混乱和复杂，但如果使用得当，它会非常强大。使用统一的度量来控制网站的各个方面有助于简化和简化，但不具备继承的力量。

我遇到过建议将两者结合使用的建议，使用 rem 设置字体大小、边框等常量，使用 em 设置边距和填充等间距。

下面是使用 rem 和 em 的例子。

.testRem h1 {
 border-style: solid;
 
 font-size: 3rem;
 width: 15rem;
 height: 3rem;
 margin: 0.5rem;
 border-width: 0.5rem;
}
.testEm h1 {
 border-style: solid;
 
 font-size: 3em;
 width: 5em;
 height: 3em;
 margin: 0.5em;
 border-width: 0.5em;
}

<!doctype html>
<html>
<head>
</head>
<body>
  <div class="testRem">
    <h1>Test rem</h1>
  <div class="testEm">
    <h1>Test em</h1>
  </div>
</body>
</html>

为什么我的 em 值在元素之间不一致？

Why are my em values inconsistent between elements?

css

font-size