html - 为什么 table-caption 会增加表格的高度？

Question

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

谁能解释一下在计算表格高度时不包括标题的合理性？

毕竟是 table 的 child 。如果您想将它排除在表格高度之外，如果您不希望它包含在内，可以将标题放在表格的外面。

.table {
  display: table;
  height: 50px;
}
.table-caption {
  display: table-caption;
  background-color: red;
  height: 20px;
}
.table-row {
  display: table-row;
  background-color: green;
}
.table-cell {
  display: table-cell;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">table height is 50px</div>
  </div>
</div>

<br>
  
<div class="table">
  <div class="table-caption">caption</div>
  <div class="table-row">
    <div class="table-cell">table height is 70px</div>
  </div>
</div>

Answer 1

这在 17.4 Tables in the visual formatting model 中有解释

the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes

也就是说，当您在带有 display: table 的元素上设置 height: 50px 时，它适用于表格框本身，不包括标题。

表格包装框确实包含它，因此它的高度是表格框本身的高度 (50px) 加上标题的高度 (20px)，即是，70px。