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

Question

的超级粉丝

过去，我使用这个超级简单的方法来计算我的字体大小、行高、边距和填充计算。然而，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 的边距。这不是我以前遇到过的方法，理解逻辑很重要，这样我才能正确计算所有内容。非常感谢您可以提供进一步阅读的任何链接。

Answer 1

在你的样本中

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size.

因为em是正文的设置字体，这将给出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>

Calculating REM, EM and PX values in normalize.css for font sizing and margins etc