摆脱文本和 td 边框之间的空间答案

【问题标题】：Get rid of space between text and td's border摆脱文本和 td 边框之间的空间
【发布时间】：2016-10-26 03:09:58
【问题描述】：

我有一个<td>，它有valign="bottom"，td 中包含的文本有font-size:100px。

如何消除<td> 中文本和边框之间的空间。

【问题讨论】：

【解决方案1】：

虽然您可以这样做，但您不应该这样做。单词的下边缘和底部边框之间有额外空间的原因是，y、g 等的下半部分 descender 是：http://jsfiddle.net/davidThomas/jM8JC/17/（在这个演示中，我'已将line-height 设置为1（无单位），这会将y 的底部边缘与下边框对齐。

调整line-height to 0.65 将单词test 的下边缘放在底部边框上，但这是一个相当随意的测量，并且取决于使用的font-size，并且可能取决于特定的浏览器。

如果您添加overflow: hidden，您还可以隐藏y 的降序部分：http://jsfiddle.net/davidThomas/jM8JC/25/

【讨论】：

“下部”称为descender。
'珍惜它；我以为是这样的，但令我感到羞耻的是，我去做了“其他事情”，然后……忘了检查。谢谢！ =)
谢谢大卫，这真的很有帮助

【解决方案2】：

只需设置一个小于文本大小的行高。像这样：http://jsfiddle.net/jM8JC/16/

【讨论】：

【解决方案3】：

需要去掉table标签中的height:200px;：

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="bottom" class="test" style="font-size:100px;padding:0px;margin:0px;"> test </td> </tr> </table>

http://jsfiddle.net/jM8JC/26/

【讨论】：

【解决方案4】：

您可以为TD指定line-height:75px

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="200px">
    <tr>
        <td valign="bottom" class="test" style="font-size:100px; line-height:75px;">
            test
        </td>
    </tr>
</table>

在此处查看更新的小提琴：http://jsfiddle.net/jM8JC/22/

【讨论】：