爲什麼在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>