Why does table-caption increase the height of the table?

Question

Both tables have their height set to 50px and their content is not overflowing. But the table with a caption is actually 70px, because the caption does not appear to be included in the table's height calculation.

Can anyone explain the rational for not including the caption in the calculation of the table height?

It's a child of the table after all. And if you wanted to exclude it from the table height, could place just the caption outside the table if you didn't want it included.

.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

According to the spec, the caption is actually above or below the table box. It is therefore removed from the height specified on the table.

17.4.1 Caption position and alignment

This property specifies the position of the caption box with respect to the table box.

Values have the following meanings:

top

Positions the caption box above the table box.

bottom

Positions the caption box below the table box.

_{Diagram of a table with a caption above it.}

_{source: https://www.w3.org/TR/CSS2/tables.html#model}

Answer 2

That's explained in 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

That is, when you set height: 50px on the element with display: table, it applies to the the table box itself, which does not include the caption.

The table wrapper box does include it, therefore its height is the height of the table box itself (50px) plus the height of the caption (20px), that is, 70px.