我可以将 em 和 rem 用于字体大小以外的东西吗？ [复制]答案

【问题标题】：can I use em and rem for things other than font-size? [duplicate]我可以将 em 和 rem 用于字体大小以外的东西吗？ [复制]
【发布时间】：2020-11-20 02:24:30
【问题描述】：

回顾一下，em 单位的意思是“我的父元素的字体大小” 排版的情况。 <ul> 中的 <li> 元素具有一个类 ems 从他们的父母那里得到他们的尺寸。所以每个连续的级别嵌套变得越来越大，因为每个都将其字体大小设置为 1.3em — 其父字体大小的 1.3 倍。

概括地说，rem 单位的意思是“根元素的字体大小”。（雷姆代表“根 em”。）<ul> 内的 <li> 元素带有一个类的 rems 从根元素 (<html>) 中获取大小。这表示每个连续的嵌套级别不会越来越大。

这是 Mozilla 提供的解释。

我可以看到在我的其他人代码的地方，他们有padding: 1.5rem。这意味着 rem 和 em 根本不与 font-size 耦合。是这样吗？

问题 1) 那么，如果我在一个元素上设置padding:1.5rem，它会有多大的尺寸？它看什么才能计算出自己的填充大小？

问题 2) 那么padding:1.5em 呢？

【问题讨论】：

这能回答你的问题吗？ How does rem differ from em in CSS?
"这意味着 rem 和 em 根本不与 font-size 耦合。对吗？"不，这是不对的。这些大小与指定的字体大小相关联。 rem 与根元素指定的字体大小相关联，而em 与为其所在规则的选择器选择的特定元素计算的字体大小相关联。
@HereticMonkey 比，如果我有padding:1.5rem，它会查看根元素（html）的字体大小并将填充设置为 1.5 * html 的字体大小？
是的，@GiorgiLagidze，就是这样。因此，如果您的rem 是16px，那么padding: 1.5rem 将与padding: 24px 相同。

标签： html css

【解决方案1】：

是的，您可以使用 em 和 rem 来测量任何长度。

问题 1) 那么，如果我在一个元素上设置 padding:1.5rem，它的尺寸是多少？它看什么才能计算出自己的填充大小？

如果一个元素的内边距是 1.5rem，那么它的内边距长度就是 html 元素字体大小的 1.5 倍。在下面的示例中，外框的内边距为 1.5x 或 15px，内框为 2x 或 20px。

html{
  font-size: 10px;
}

.p,.c{
  border: solid 1px #f00;
}

.p{
  padding: 1.5rem;
}

.c{
  padding: 2rem;
}

<div class='p'>
  <div class='c'></div>
</div>

问题 2) 那么 padding:1.5em 呢？

具有 1.5em 内边距的元素将采用字体大小设置的最近父级（包括自身）的 1.5 倍字体大小。因此，如果您将前面示例中外框的字体大小设置为 8px，它将具有 1.5x 或 12px 的内边距，而内部元素将具有 2x 或 16px 的内边距。

html {
  font-size: 10px;
}

.p,
.c {
  border: solid 1px #f00;
}

.p {
  font-size: 8px;
  padding: 1.5em;
}

.c {
  padding: 2em;
}

<div class='p'>
  <div class='c'></div>
</div>

【讨论】：

【解决方案2】：

Answer1：所以如果你设置padding:1.5rem，它会根据根HTML的根字体大小来设置大小，即24px。（1rem 默认为 16px）

它会根据给定的值进一步设置填充空间，并乘以根元素（HTML）的字体大小。

Answer2：和 em 一样，它会根据给定的字体大小乘以 em 的值。默认情况下，1em 为 12px。所以如果你设置paddind:1.5em，它会添加一个16px的填充空间。

希望这会有所帮助。

注意：em to px 和 rem to px 的值可能会有所不同。

【讨论】：