html - 使用垂直对齐时的表格单元格填充问题

Question

在下面的代码中，我看不出为什么B第二列中的字符没有像我设置的那样位于单元格的顶部，vertical-align: top而padding: 0. 同样对于C我想要在其单元格底部的第二行中的字符。

有人可以解释我做错了什么吗？

* {
    outline: 1px solid red;
}
td{
    padding:0;
}
.level-1{
    font-size: 4em;
    vertical-align: middle;
}
.level-2-1{
    font-size: 2em;
    vertical-align: top ;
}
.level-2-2{
    font-size: 2em;
    vertical-align: bottom ;
}
.level-3-1{
    font-size: 1em;
    vertical-align: top;
}
.level-3-2{
    font-size: 1em;
    vertical-align: bottom;
} 

<table>
<tbody>
  <tr>
    <td rowspan="2" class="level-1">A</td>
    <td class="level-2-1">B</td>
    <td class="level-3-1">C</td>
  </tr>
  <tr>
    <td class="level-2-2">C</td>
    <td class="level-3-2">B</td>
  </tr>
</tbody>
</table>

标签： htmlcsshtml-table