Css 为什么两个分区不在同一位置开始

标题
这里有描述
.狭窄{
左侧边缘：5em；
右边距：5em；
}
.标题{
字体大小：36px；
}

为什么增加标题的字体会使其远离左侧

---

如果我在CSS中将12 em替换为165 px，则可以达到所需的效果。但是，如果窗口大小不同，该站点将不会按需要显示

设置

左边距：5em

5em是字体大小的5倍，因此

标题上的字体大小越大，
左边距越大

更多信息

编辑

如果需要响应边距，则需要使用百分比em
是元素当前字体大小的倍数。因为
.heading
的字体更大，所以它的边距会更大

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

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

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

您可以在这里（IMHO）找到一些非常好的信息：
来自

Em通常定义为当前面和点大小中大写字母M的宽度。它更适合定义为当前点大小。例如，在12点类型中，em是12点的距离

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

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


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