不同高度的并列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，以在支持它的浏览器中修复此问题。