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

Question

在我的 fontsize xx-large 段落中使用 1em 作为 margin-left，比使用 16px 给我更多的边距。 1em 等于 16px 怎么可能？

Answer 1

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

Answer 2

使用 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>

Answer 3

您混淆了 em 和 rem。正如其他人已经写的那样，em 使用元素的 font-size，而 rem 使用基本的 fontsize 。对于 html 标签，可以将其定义为 font-size。如果没有定义，它会回退到 browser 设置，大多数情况下默认为 16px（但也可以由用户在浏览器设置中更改）。

Answer 4

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

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

Why does px and em behave different in this case?

css

font-size