css - 具有不同高度的并排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 指定了不同的边距/填充，因此您有不同的实际高度。