为什么px和em在这种情况下表现不同

Question

在字体大小为xx的段落中，使用1em作为左边距，比使用16px给我更多的边距。当1em等于16px时，这怎么可能呢？

Answer 1

em使用所应用元素的font-size，因此其px大小不是恒定的。您可以使用rem单元，它总是使用浏览器的默认font-size(16px(。

Answer 2

您混淆了em和rem。正如其他人已经写过的，em使用元素的字体大小，而rem使用基本字体大小。这可以定义为html标签的字体大小。如果未定义，则返回浏览器设置，默认情况下大多数时间为16px(但用户也可以在浏览器设置中更改(。

Answer 3

EM使用元素字体大小。因为你在段落中给出了font-size: xx-large，所以字体大小不是16px，而是32px。

Answer 4

使用em单位作为边距将使用它所应用的元素中的font-size。除非它恰好是16px，否则它将不会与显式16px边距匹配。

p {
margin: 0;
font-size: 20px;
}
.em {
margin-left: 1em;
}
.px {
margin-left: 16px;
}

<p class="em">1</p>
<p class="px">2</p>