gpt4 book ai didi

html - 边距是相对于当前元素的吗?

转载 作者:行者123 更新时间:2023-11-28 02:14:20 25 4
gpt4 key购买 nike

假设我有以下代码:

<html>
<body>
<header>
<h1>
Hello World
</h1>
</header>
</body>
</html>

body{
// make 1em equivalent to 10px when browser default is 16px
font-size: 62.5%;
}

header{
font-size: 1em;
}

header h1{
font-size: 3em;
margin-bottom: 1em;
}

如果浏览器默认的font-size是16px,那么我们的h1就是30px。我希望我的 h1 下面的边距是字体大小的 33%,但由于某种原因它也是 30px。就像字体大小一样。我明确指定它应该是 1em。

我知道 em 是相对于父容器的。边距是相对于当前元素的吗?即,如果 h1 的字体大小设置为 4em(40px),那么 1em 的边距是否也会自动变为 40px?这是预期的行为吗?我应该说 margin-bottom: 0.33em.

最佳答案

您假设 1em is equal to the current font size. 是正确的所以如果我们有这个:

<header style="font-size:10px;">
<h1 style="font-size:2em; padding:1em;">
Hello World
</h1>
<p style="padding:1em;">
The world is a happy place
</p>
</header>

h1 的内边距为 20px,p 的内边距为 10px。

如果您是 ems 的新手,我只记得我强烈推荐这篇关于使用 ems 创建网页的文章:Fluid Grids

关于html - 边距是相对于当前元素的吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6092254/

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