擺脫文字與td邊框之間的空間

Question

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

如何擺脫<td>中的文字和邊框之間的空白。

請在這裏找到示例代碼 http://jsfiddle.net/jM8JC/1/

Answer 1

雖然你可以做到這一點，但你不應該這樣做。在這個詞的下邊緣和底部邊界之間有額外的空間的原因在於那裏的下部分，y,g等的descender變爲：http://jsfiddle.net/davidThomas/jM8JC/17/（在這個演示中，我已經設置了line-height到1（no單元），其放置y靠在下邊界。

調整line-height to 0.65地方抵靠底部邊界的字test的下邊緣的底邊緣，但它是一個相當任意的測量，並且取決於所用的font-size，並且可能是特定的瀏覽器

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

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

可以爲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/

Answer 4

只需設置一個行高度比文字大小小。像這樣：http://jsfiddle.net/jM8JC/16/