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

【问题标题】：Why div doesn't fit its height based on nested span height为什么 div 不适合基于嵌套跨度高度的高度
【发布时间】：2015-07-10 06:45:59
【问题描述】：

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

div {
    border: 1px solid black;
}

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

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

【问题讨论】：

标签： html css

【解决方案1】：

似乎当字体缩小时，父 div 保留了它最初加载的 line-height，将 div 上的 line-height 设置为 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>

【讨论】：

【解决方案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 标记中。

【讨论】：

你能解释一下为什么将'display: table-cell'添加到span会强制外部div高度匹配那个span吗？
@Behnil display: table-cell 不会强制外部 div 匹配跨度的高度，而是强制跨度匹配 div 的高度。 display: table-cell 使 span 表现得像一个 td 标签，它填充了 div 的高度，因为您的标记只有一个单元格。如果表格只有一个单元格，则该单元格将填充表格的高度，而不管表格 (div) 有多长。
但是当你运行我的sn-p和你的sn-p时，你可以看到span高度是一样的。另一方面，在您的示例中，div 变小了。我真的很困惑。