为什么 div 不适合基于嵌套跨度高度的高度

Question

我刚刚发现了一个我无法理解的问题。为什么这个div比嵌套的span大?我认为div的高度适合它的内容。

div {
    border: 1px solid black;
}
span {
    font-size: 9px;
    border: 1px solid black;
}

<div>
    <span>This is test label</span>
</div>

Answer 1

似乎当字体收缩时，父div保留了它最初加载的行高，将div的行高设置为与font-size相同，并添加额外的像素并将span垂直对齐，它会做到这一点:

div {
    border: 1px solid black;
    line-height: 10px;
  }
span {
    font-size: 9px;
    vertical-align: top;
    border: 1px solid black;
}

<div>
    <span>This is test label</span>
</div>

Answer 2

将display: table-cell添加到span标签中。对于一个div，它不会自动完美地匹配它的子元素的内容。

div {
    border: 1px solid black;
}
span {
    font-size: 9px;
    border: 1px solid black;
    display: table-cell;
}

<div>
    <span>This is test label</span>
</div>

如果您希望div的宽度匹配span的宽度也，添加display: table-cell到div标签