在 normalize.css 中计算 REM、EM 和 PX 值，用于字体大小和边距等答案

【问题标题】：Calculating REM, EM and PX values in normalize.css for font sizing and margins etc在 normalize.css 中计算 REM、EM 和 PX 值，用于字体大小和边距等
【发布时间】：2016-07-25 19:44:45
【问题描述】：

我最近成了normalize.css的忠实粉丝

过去，我使用this 超级简单的方法来计算我的字体大小、行高、边距和填充计算。但是，normalize.css 的大小结构让我很困惑。

例如。通过body 标签，字体大小以 REM 和 PX 为单位计算，行高以无单位值计算：

body,
button,
input,
select,
textarea {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

虽然边距和填充是在 EM 中计算的：

p {
    margin-bottom: 1.5em;
}

一切是如何计算的？假设我想为我的<p> 标签添加 24px 的边距。这不是我以前遇到过的方法，重要的是我理解逻辑，这样我才能正确计算一切。非常感谢您提供进一步阅读的任何链接。

【问题讨论】：

标签： css normalize

【解决方案1】：

在您的示例中

em 和 ex 单位取决于字体，并且每个单位可能不同文档中的元素。 em 就是字体大小。

你需要知道的都在这里：https://www.w3.org/Style/Examples/007/units.en.html

由于em 是body 的设置字体，这将给出24px 的边距

body {
  font-size: 16px;
}
div {
  height: 30px;
  background: red;
}
p {
  background: yellow;
  margin-bottom: 1.5em;
}

<p>Hello</p>
<div></div>

这将提供 45px 的边距

body {
  font-size: 30px;
}
div {
  height: 30px;
  background: red;
}
p {
  background: yellow;
  margin-bottom: 1.5em;
}

<p>Hello</p>
<div></div>

【讨论】：