Html td中带引导的全高输入

看。我试图使用bootstrap的css用输入填充一个表单元格，但是我留下了一个无法消除的空白

我的html代码片段是：

<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="with-input"><input class="form-control tall" type="text" value="text"></td>
      <td class="tall">XX</td>
    </tr>
  </tbody>
</table>

但在输入的底部仍然有一个缺口，我无法消除。它似乎与引导设置有关

* {
    box-sizing: border-box;
}

但我不知道如何在不完全移除引导的情况下逆转这种效果。如果我将td设置为使用内容框，高度可以，但会水平溢出到下一个单元格中。

添加填充：0

输出

---

我找到了解决办法。似乎出于某种原因，填充会从子元素泄漏到td，因此在输入上设置padding:10px也会将其分配给td。解决方案是使用样式将输入包装到div中：

padding: 0;
display: inline-block;
height: 100%;
width: 100%;

---

例如：

底部仍然有一个间隙，尽管它要小得多。但最大的问题是，我实际上在输入中填充内容。在我的示例中，我使用固定高度来说明这个问题。在我的实际实现中，由于其他内容，高度发生了变化，因此我不能将输入的最小高度硬编码为td的高度。

td {
  padding: 0px !important;
}

td.tall {
  height: 100px;
  padding: 0;
}

input.tall {
  margin: 0;
  height: 100%;
  display: inline-block;
  width: 100%;
  padding: 0;//added
}

padding: 0;
display: inline-block;
height: 100%;
width: 100%;