当td有文本时如何最小化td高度？

Question

我需要的是14px文本，在16px td（高度）内。 当我尝试使用空的td时，这是有效的，但是当我放入一些文本时，td会自动达到20px的高度。这留下了我不想要的2px上下边距。

HTML：

<table>
<tr><td>09:00 - 12:00</td><td>09:00 - 12:00</td></tr>
<tr><td>09:00 - 12:00</td><td>09:00 - 12:00</td></tr>
</table>

CSS

table{
    border-collapse: collapse;
}
td{
    background-color: #5589DC;
    color:white;
    font-family: Calibri;
    font-size: 14px;
    border: 1px solid black;
    height: 16px;
}

这是结果（20px td height）：

但这就是我想要的（16px td height（用paint修改））：

有什么想法吗？

Answer 1

更改高度：16px到行高：13px，这将减少TD内的空间。

Answer 2

您只需将line-height设置为与font-size匹配，即line-height: 14px。

table {
    border-collapse: collapse;
}
td {
    background-color: #5589DC;
    color: white;
    font-family: Calibri;
    font-size: 14px;
    line-height: 14px;
    border: 1px solid black;
    height: 16px;
}

Answer 3

您可以将文本放在div上，并给div高度为16px