Question

我对代码有一些严重的问题：

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-size:16px;
}
p {
    margin: 0 0 1em 0;
    font-size: 2em;
    line-height: 1em;

}
</style>
</head>
<body>

<p>Sample Text</p>


</body>
</html>

据我所知，字体大小现在为32px，因为我将2em设置为16的两倍，但为什么即使是1em，边缘底部和行高32px也是如此？

Answer 1

在您的情况下，您应该使用rem代替em。

看看here。

em相对于其最近父级的字体大小，而rem相对于根字体大小。

我想思考＆＃34; r＆＃34; rem作为＆＃34; root em＆＃34;。而root表示html而不是body元素。

＆＃13;

console.log("padding of div em  : " + window.getComputedStyle(em).padding);
console.log("padding of div rem : " + window.getComputedStyle(rem).padding);

＆＃13;

html {
  font-size: 10px;
}
div.parent {
  font-size: 20px;
}
div.child {
  border: 1px solid black;
  margin: 5px;
}
#em {
  padding: 1em;
}
#rem {
  padding: 1rem;
}

＆＃13;

<div class="parent">
  <div id="em" class="child">1em</div>
  <div id="rem" class="child">1rem</div>
</div>

＆＃13;

Answer 2

由于您使用em作为字体大小单位，因此它相对于直接父项或声明了font-size的相同元素。这里你的<p>的字体大小为2em（意味着32px）所以行高和边距现在正在考虑32px作为其基值，并且em正在根据这个新值进行计算。

但是如果你使用rem作为单位，它将始终将body / html字体大小作为其基本值。

为什么1em不是基于定义的16px？

2 个答案: