不同高度的並列div

Question

我已將兩個div放在一起，我已經指定了相同的高度，但第二個看起來比第一個高。爲什麼會發生這種情況，他們應該有相同的高度，但他們不是。

body { 
    font-family: Arial, Helvetica, sans-serif; 
    background : #CD8C95; 
} 
div { 
    height:30em; 
} 
div#links { 
    font-size:18px; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    background : #EEDD82; 
    padding-top: 15%; 
    padding-left: 10px; 
    width : 12em; 
    float:left; 
} 
div#content { 
    padding-left: 5em; 
    padding-top:10em; 
    background:#FFA07A; 
    float:left; 
    width:20em; 
} 

Answer 1

正如可以在W3C documentation看到，一個盒的實際尺寸由高度/寬度，再加上邊距和補生產。既然你爲你的div指定了不同的邊距/填充，你有不同的實際高度。

Answer 2

由於不同的填充量，這是在高度後計算的。換句話說，div#links的高度是30em + 15%，並且div#content的高度是30em + 10em。請參閱W3C's box model documentation。

您可以添加CSS box-sizing規則，例如box-sizing: border-box或box-sizing: padding-box，以在支持它的瀏覽器中修復此問題。