困惑关于填充在表内的标签顶部

Question

我的代码类似如下：

＆＃13;

＆＃13;

table,tr,td {
  border-collapse:collapse;
  border: 1px solid black;
}
label {
  font-size: 0.7rem;
}
table {
  table-layout: auto;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>
        <input>
      </td>
    </tr>
    <tr>
      <td>
        <label>Foo bar</label>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

当顶部的元素大于底部的元素时，会出现问题。我知道解决方案似乎很明显：使用table-layout: auto;然而，正如您所看到的，这不起作用。

没有填充或边距，并且未在其中任何一个上手动设置高度。 我的问题如下：为什么那里有空间，更重要的是，如何将其删除？