Question

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

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

当我将width更改为5em时，它可以正常运行：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

为什么em中的宽度比px中的宽度宽

1 个答案: