并排的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，以便在支持它的浏览器中修复此问题。