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/