gpt4 book ai didi

css - 为什么1em不是基于定义的16px呢?

转载 作者:太空宇宙 更新时间:2023-11-04 14:51:18 26 4
gpt4 key购买 nike

我在理解代码时遇到一些严重的问题:

<!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 的两倍,但为什么 margin-bottom 和 line-height 是 32px,即使它是 1em?

最佳答案

在您的情况下,您应该使用 rem 而不是 em

看看here .

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

我想将 rem 的“r”视为“root em”。根表示 html 而不是 body 元素。

console.log("padding of div em  : " + window.getComputedStyle(em).padding);
console.log("padding of div rem : " + window.getComputedStyle(rem).padding);
html {
font-size: 10px;
}
div.parent {
font-size: 20px;
}
div.child {
border: 1px solid black;
margin: 5px;
}
#em {
padding: 1em;
}
#rem {
padding: 1rem;
}
<div class="parent">
<div id="em" class="child">1em</div>
<div id="rem" class="child">1rem</div>
</div>

关于css - 为什么1em不是基于定义的16px呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50791045/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com