排版:关于EM的快速问题

时间:2011-05-23 02:23:35

标签: html css font-size typography em

假设我有以下代码:

<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。

2 个答案:

答案 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。