为什么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是元素当前字体大小的倍数。由于.heading具有更大的字体，因此它将具有更多的余量。

如果您不希望保证金随字体大小而变化，请尝试使用px（像素）或可能rem（根元素字体的倍数）。

Answer 2

  

em不是绝对单位 - 它是一个相对于当前所选字体大小的单位。

您的保证金会根据字体大小而变化，这就是heading保证金不同的原因。

你可以在这里找到（恕我直言）一些非常好的信息：Why EM instead of PX

Answer 3

您将left-margin:5em; 5em设置为字体大小的5倍，以便.heading上的字体大小更大，left-margin更大。

更多信息here

修改

如果您想要响应保证金，则需要使用百分比

Answer 4

来自Adobe Glossary

  

传统上，Em被定义为当前面部和点尺寸中的大写M的宽度。它更恰当地定义为当前点大小。例如，在12点类型中，em是12点的距离。

您会看到，如果您使用em这样的绝对度量更改px，您将获得结果。