Get rid of space between text and td's border

Question

I have a <td> that has valign="bottom" and the text contained in the td has font-size:100px.

How do I get rid of the space between the text and the border in a <td>.

Please find sample code here http://jsfiddle.net/jM8JC/1/

Answer 1

While you can do this, you shouldn't. The reason there's extra space between the the lower edge of the word and the bottom border is that's where the lower parts, the descender of the y, g, etc, goes: http://jsfiddle.net/davidThomas/jM8JC/17/ (in this demo I've set line-height to 1 (no unit), which places the bottom edge of the y against the lower border.

Adjusting the line-height to 0.65 places the lower edge of the word test against the bottom border, but it's a fairly arbitrary measurement, and dependent upon the font-size used, and, probably, the particular browser.

And if you add overflow: hidden you can also hide the descending portion of the y if you wish: http://jsfiddle.net/davidThomas/jM8JC/25/

Answer 2

Just set a line height smaller than text size. Like this: http://jsfiddle.net/jM8JC/16/

Answer 3

You need to get rid of the height:200px; in the table tag:

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

You can specify line-height:75pxfor the 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>​

See an updated fiddle here: http://jsfiddle.net/jM8JC/22/