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

Question

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

Answer 1

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

Answer 2

您混淆了 em 和 rem。正如其他人已经写的那样， em 使用元素的 font-size ，而 rem 使用基本 fontsize 。可以将其定义为 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>