在normalize.css中计算字体大小和边距等的REM，EM和PX值

Question

我最近成为normalize.css

的忠实粉丝

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

例如。通过body标记，在REM和PX中计算字体大小，并且以无单位值计算行高：

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

虽然在EMs中计算边距和填充：

p {
    margin-bottom: 1.5em;
}

如何计算所有内容？假设我想在我的<p>标记中添加24px的边距。这不是我以前遇到的方法，重要的是我理解逻辑，所以我可以正确计算所有内容。我们非常感谢您为进一步阅读提供的任何链接。

Answer 1

在您的样本中

  

em和ex单位取决于字体，每种单位可能不同   文件中的元素。 em只是字体大小。

您需要知道的只有：https://www.w3.org/Style/Examples/007/units.en.html

由于em是正文的设置字体，因此这将提供24px的保证金

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这将提供45px的保证金

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;