我有一个<td>
that hasvalign="bottom"
和包含在 td has 中的文本font-size:100px
。
如何摆脱<td>
.
请在此处找到示例代码 http://jsfiddle.net/jM8JC/1/
我有一个<td>
that hasvalign="bottom"
和包含在 td has 中的文本font-size:100px
。
如何摆脱<td>
.
请在此处找到示例代码 http://jsfiddle.net/jM8JC/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/
You can specify line-height:75px
for 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/
Just set a line height smaller than text size. Like this: http://jsfiddle.net/jM8JC/16/