摆脱文本和td边界之间的空间

Question

我的<td>有valign="bottom"，而且td​​中包含的文字有font-size:100px。

如何摆脱<td>中文本与边框之间的空格。

请在此处找到示例代码 http://jsfiddle.net/jM8JC/1/

Answer 1

虽然你可以这样做，但你不应该这样做。在单词的下边缘和下边框之间有额外空间的原因是下部，y，g等的descender变为：{{ 3}}（在此演示中，我将line-height设置为1（无单位），这会将y的下边缘放在下边框上。

调整http://jsfiddle.net/davidThomas/jM8JC/17/将单词test的下边缘放在底部边框上，但这是一个相当随意的测量，并且取决于所使用的font-size，可能还有特别是浏览器。

如果您添加overflow: hidden，还可以隐藏y的下降部分：line-height to 0.65

Answer 2

您需要摆脱表格标记中的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/

Answer 3

您可以为line-height:75px

指定TD

<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/

Answer 4

只需将行高设置为小于文本大小即可。像这样：http://jsfiddle.net/jM8JC/16/