使用CSS在字体大小方面表格单元格高度

Question

我有一张桌子（特别是日历）。当任何日期没有写入任何内容时，我想让日历看起来不丑，所以我希望单元格的最小大小等于字体高度的四倍。 （也就是说，如果我的日历行中没有任何内容，并且日历行包含四行文本，我希望它们的大小相同）。

到处都说使用em。但是，我尝试将4em用于我的12pt字体，但它无处接近：

td.day {
    padding: 2px;
    font-size: 12pt;
    width: 14.3%;
    height: 4em;
    vertical-align: top;
}

我精确计算了像素数，以及我正在使用的特定字体的12pt字体，

font-family: verdana, arial, "sans-serif";

height 22px。这不是很灵活，但是......有没有更好的方法呢？

考虑更多，我确信em单位正确告诉我字体的高度。它只是没有考虑行间距或填充或其他任何类型。有没有办法做到这一点？

Answer 1

您必须考虑行高乘数。对于td元素，如果选择12pt的字体大小，则还必须指定行高。例如，如果你想要一个18px的行高，你的12pt字体大小：

td.day {
    font-size: 12pt;
    line-height: 1.5;
}

请确保不要使用像em或px这样的单位来指定行高，因为它是字体大小的乘数。 你的行高现在是18px，或者如果你想使用ems，1.5em。现在，如果你想指定四行的高度，你可以使用6em。