Html 为什么表格标题会增加表格的高度？

两个表的高度都设置为50px，并且它们的内容没有溢出。但是带有标题的表格实际上是70px，因为标题似乎没有包含在表格的高度计算中

有谁能解释一下在计算桌子高度时不加标题的原因吗

毕竟这是桌子上的孩子。如果您想将其从表格高度中排除，如果您不想将其包括在内，可以将标题放在表格外

.table{
显示：表格；
高度：50px；
}
.表格标题{
显示：表格标题；
背景色：红色；
高度：20px；
}
.表格行{
显示：表格行；
背景颜色：绿色；
}
.表格单元格{
显示：表格单元格；
}

桌子的高度是50像素


说明文字
桌子的高度是70像素

中解释了这一点

该表生成一个称为表包装器的主块框 包含表格框本身和任何标题框的框

也就是说，在使用

display:table

对元素设置

height:50px

时，它将应用于表格框本身，其中不包括标题

表格包装框确实包含它，因此它的高度是表格框本身的高度（

50px

）加上标题的高度（

20px

），也就是说，

70px

---

根据规范，标题实际上在表格框的上方或下方。因此，它将从表中指定的高度移除

此属性指定标题框相对于的位置 到桌子的盒子里

值具有以下含义：

顶部

将标题框放置在表格框上方

底部

将标题框放置在表格框下方

资料来源：