假设我有以下代码:
<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;
}
如果浏览器的默认字体大小是16px,那么我们的h1将是30px。我希望低于我的h1的边距将是字体大小的33%但是由于某种原因它也是30px。就像字体大小一样。我明确指出它应该是1em。
我知道em是相对于父容器的。边距是否相对于当前元素?即如果h1的font-size设置为4em(40px),那么1em余量是否会自动变为40px?这是预期的行为吗?我应该说margin-bottom: 0.33em
。
第一次使用em。
答案 0 :(得分:1)
你是1em is equal to the current font size.所以,如果我们有这个:
<header style="font-size:10px;">
<h1 style="font-size:2em; padding:1em;">
Hellow World
</h1>
<p style="padding:1em;">
The world is a happy place
</p>
</header>
h1
的填充为20px,p
的填充为10px。
如果您是ems的新手,我只记得这篇文章,我强烈建议您讨论使用ems创建网页:Fluid Grids
答案 1 :(得分:0)
我知道em是相对于父容器的
没有。 em是相对于当前的字体大小。因此,在ems中定义字体大小是循环的。从排版方面来说,你应该在点,而不是像素中定义字体大小,然后你获得分辨率独立性,然后在ems中定义边距和宽度以及缩进&amp; c。