刪除大寫頭附近的空格

Question

我有一個以大寫字母顯示的標題。我想在這個標題和下面的框框之間只有2個像素。

如果文本包含像'g'這樣的小寫字母，下面沒有空格，但是一旦所有的'g'，'y'和'j'字母都消失了，它就會出現。

是否有任何跨瀏覽器的方法來擺脫該空間？顯然瀏覽器顯示不同數量的空白空間：https://jsfiddle.net/5o94va6p/13/，所以像line-height: 0.7這樣的技巧在Firefox中工作，但在Safari中吃太多空間。

Answer 1

Safari和chrome在空白空間方面看起來相似。 Firefox看起來不同的瀏覽器。我只會使用CSS爲它指定行高。這樣，Firefox看起來不錯，而且不會影響其他瀏覽器的外觀。

嘗試這個代碼，這將僅靶向的Firefox：

@-moz-document url-prefix() { 
    h1 { 
     line-height: 0.7 
    } 
} 

Answer 2

嘗試使用此 -

.box{ 
    margin-top: 2px; 
    position: fixed; 
} 

Answer 3

這是需要像Y，G信低於基線的空間，對等是總是在那裏，它是行高的一部分 - 這是你的問題的原因。除非你定義了一個負邊界底值，否則你不能改變它，就像

.my_heading { 
    margin-bottom: -4px; 
}