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 incl

Answer 1

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.

Answer 2

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}