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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With