为什么以 em 为单位的宽度比以 px 为单位的宽度要宽？

Question

我假设下面的 div 具有相同的宽度。但是它们是不同的，虽然10px*10em应该等于100px，类似10px*2em等于20px。

#container1 {
  font-size: 10px;
}
#paragraph1 {
  font-size: 20px;
  width: 100px;
  background-color: yellow;
}
#container2 {
  font-size: 10px;
}
#paragraph2 {
  font-size: 2em;
  width: 10em;
  background-color: yellow;
}

<div id='container1'>
  <p id='paragraph1'>abc</p>
</div>
<div id='container2'>
  <p id='paragraph2'>abc</p>
</div>

Answer 1

那是我真正的问题，但我在写这个问题的过程中找到了答案。原因很简单：元素的 width 使用的 em 单位是相对于它们自己的元素的 font-size，而不是父元素的。因此，由于 font-size 等于 2em，等于 20px，一切都是正确的，因为 20px*10em 等于 200px。

当我将 width 更改为 5em 时，它会正常工作：

#container1 {
  font-size: 10px;
}
#paragraph1 {
  font-size: 20px;
  width: 100px;
  background-color: yellow;
}
#container2 {
  font-size: 10px;
}
#paragraph2 {
  font-size: 2em;
  width: 5em;
  background-color: yellow;
}

<div id='container1'>
  <p id='paragraph1'>abc</p>
</div>
<div id='container2'>
  <p id='paragraph2'>abc</p>
</div>

为什么以 em 为单位的宽度比以 px 为单位的宽度要宽？

Why is width in em wider than the same in px?

css

font-size