Default value of vertical-align for table cells

问题:

According to the spec, the default value of vertical-align is baseline.

baseline

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

However, when it comes to table cells (td) it appears the default value is always middle.

middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

I would like official confirmation of this behavior, but I can't find anything in W3C documentation. Everything I've found says the default value is baseline.

Where does it say that the default value of vertical-align is middle for table cells?

回答1:

As said by the spec, the initial value of vertical-align is always baseline:

vertical-align

• Initial: baseline

However, as explained in The cascade,

Conforming user agents must apply a default style sheet (or behave as if they did).

A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language.

See A sample style sheet for HTML for a recommended default style sheet for HTML documents.

And that recommended stylesheet contains

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

Therefore, if you (author origin) don't provide any value for tbody's nor td's vertical-align, the cascade will retrieve the middle value from the user agent origin.

Note the default style sheet is implementation dependent, so some browsers may set different vertical-align values for different elements.