在normalize.css中计算字体大小和边距等的REM，EM和PX值(Calculating REM, EM and PX values in normalize.css for font siz

在normalize.css中计算字体大小和边距等的REM，EM和PX值(Calculating REM, EM and PX values in normalize.css for font sizing and margins etc)

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

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

I've recently become a big fan of normalize.css

In the past, I've used this super easy method to calculate my font sizes, line height, margin and padding calculations. However, the sizing structure via normalize.css is completing confusing me.

For example. Via the body tag, font-size is being calculated in REMs and PX and line-height is being calculated in unitless values:

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

Whilst margins and padding is being calculated in EMs:

p { margin-bottom: 1.5em; }

How is everything being calculated? Let's say I want to add a margin of 24px to my <p> tag. This is not a method I've come across before and it's important I understand the logic so I can correctly calculate everything. Any links you can provide to further reading is greatly appreciated.

最满意答案

在你的样本中

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

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

因为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> 
  
 
In your sample
 
 
 
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.
 
 
All you need to know is here: https://www.w3.org/Style/Examples/007/units.en.html
 
Since em is the body's set font, this will give 24px margin
 
 
 
  
  
body {
  font-size: 16px;
}
div {
  height: 30px;
  background: red;
}
p {
  background: yellow;
  margin-bottom: 1.5em;
} 
  
<p>Hello</p>
<div></div> 
  
 
 
And this will give 45px margin
 
 
 
  
  
body {
  font-size: 30px;
}
div {
  height: 30px;
  background: red;
}
p {
  background: yellow;
  margin-bottom: 1.5em;
} 
  
<p>Hello</p>
<div></div>