为什么相同的字体大小会得到不同的结果？

Question

为什么div中的字体大小不同？

<div style="font-size: 30px;">
    <h1>Sample text</h1>
</div>

<div>
    <h1 style="font-size: 30px;">Sample text</h1>
</div>

为什么会出现这种情况？

Answer 1

Chrome 中

h1

标签的默认值为

2em

。 Ems 与 CSS 中设置的字体大小相关。

因此，在第二个

div

中，您将用

2em

覆盖

30px

元素的

h1

值 - 字体大小现在等于

30px

；

在第一个

div

中，您将（容器）div 的字体大小设置为

30px

，因此现在

2em

使用它作为基本字体大小 - 计算出的字体大小现在等于

60px

。

<section style="font-size: 15px">
  <div>base font-size: 15px</div>
  <div style="font-size: 3em">this should be 45px (15px x 3em)</div>
</section>