css - 为什么2个div不在同一位置开始

Question

http://jsfiddle.net/y8LhR/1/

<div class="narrow heading">Heading</div>
<div class="narrow">Description goes here</div>


.narrow{
    margin-left:5em;
    margin-right:5em; 
}
.heading{
    font-size:36px;
}

为什么增加标题的字体会使它离左边更远？

如果我在 CSS 中将 12 em 替换为 165 px，就可以达到预期的效果。但是随后该站点将不会以不同的窗口大小显示。

Answer 1

em is not an absolute unit - it is a unit that is relative to the currently chosen font size.

您的边距根据字体大小而变化，这就是为什么 heading 边距不同的原因。

您可以在这里(恕我直言)找到一些非常好的信息:Why EM instead of PX