"：first-letter"擬似要素 - モバイル上のスペースを削除する

Question

最初の文字を別のスタイルでスタイルしたいのですが、それはデスクトップ上のすべてのブラウザとすべてのブラウザ幅で動作しますが、窓の電話）私は手紙の上部と下部にいくつかの奇妙な間隔があります。

デスクトップ：

モバイル：

これは私のCSSです：

p:first-of-type:first-letter { 
    border: 1px solid red; 
    display: block; 
    float: left; 
    font-size: 5.6em; 
    font-weight: bold; 
    line-height: 1em; 
    margin-top: 8px; 
    padding-right: .2em; 
    padding: 0; 
    text-transform: uppercase; 
} 

Codepen here。

Answer 1

私は追加することによって、それを管理する：

line-height: .6em; 

を