2014-05-02 65 views
1

添加文本時,我遇到了DIV頂部和底部之間的較大間隙。它看起來像是文本的計算高度,但它爲什麼出來這麼多?理想情況下,我需要它儘可能與邊界齊平。div和text之間的這個神祕的差距是什麼?

我創建了一個簡單的小提琴證明這一點http://jsfiddle.net/XFqq5/3/

CSS

#text { 
display: inline-block; 
font-size: 70px; 
border: 1px solid red; 
line-height: 1; 
} 

HTML

<div id="text">test</div> 
+0

嘗試降低行高。你看到的是正常的,如果你有大寫字母,這個空間就會被填滿。 – joakimdahlstrom

+0

可能的重複http://stackoverflow.com/questions/15161385/how-to-get-the-real-height-of-a-text –

回答

8

它的組合:

  • 您使用的不是最高或最低字形的字體(鍵入一個大寫字母和一個帶有伸如gy
  • 沒有什麼規則,它說,字形具有伸展字體的整個高度
+1

問題是它可能是用戶選擇的幾種字體之一,並不一定包括最高或最低字形的字母,但我需要它的邊界儘可能準確。我將如何強制使用JS或其他方法的規則只將它擴展到我在那裏的信件? – jamiers

+1

也許渲染它在''中,然後在繪製邊框之前測量像素顏色。 – Quentin

+1

我最終使用畫布和測量像你所建議的像素顏色結束了相當準確的工作,我會接受你的答案歡呼你的幫助。即使當我使用最高的字形時,它們仍然錯誤地實際上是一些下界,他們甚至偷看了邊界。 – jamiers