为什么在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

这是我的真正的问题，但我写这个问题的过程中找到答案。原因很简单：em单元使用的元素width相对于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>