Html 为什么div没有'；t根据嵌套跨距高度拟合其高度

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

div{
边框：1px纯黑；
}
跨度{
字体大小：9px；
边框：1px纯黑；
}

这是测试标签

将

显示：表格单元格

添加到

span

标记中。对于

div

，它不会自动完全适合其子对象的内容

div{
边框：1px纯黑；
}
跨度{
字体大小：9px；
边框：1px纯黑；
显示：表格单元格；
}

这是测试标签

看起来，当字体缩小时，父div保留了它最初加载的行高，将div上的行高设置为与字体大小相同，并添加额外的像素并将跨度垂直对齐，它将执行以下操作：

div{
边框：1px纯黑；
线高：10px；
}
跨度{
字体大小：9px；
垂直对齐：顶部；
边框：1px纯黑；
}

这是测试标签

div的父元素是什么？此外，除了字体大小之外，我看不到指定跨距大小的位置。您能解释一下为什么在跨距中添加“显示：表格单元格”会强制外部div高度与该跨距匹配吗？@Behnil display:table cell不会强制外部div与跨距高度匹配，而是强制跨距与div高度匹配。显示：表格单元格使跨度的行为类似于td标记，它填充div的高度，因为标记只有一个单元格。如果一个表只有一个单元格，那么无论该表（div）有多长，该单元格都将填充该表的高度。但当您运行“我的代码段”和“代码段”时，可以看到跨度高度是相同的。另一方面，示例中的div变小了。我真的很困惑。