vw font-sizeを使用した場合のテキストの埋め込み

Question

私はvwを使用して、ページが開いているブラウザに従ってテキストを拡大します。ただし、パディングは予想よりも大きくなります。私はそれがちょうどパディングなしで私のページの上隅にあることを望んでいます。 （私はpadding:0px;を試しましたが結果はありません）。ここでは例です：HTMLで

：CSSで

<heading>some text</heading> 

：

heading{ 
    font-size:5vw; 
    padding:0px; 
    margin:0px; 
} 

Answer 1

あなたが以下のいずれかを実行することができますしたい結果を取得するには：

1 - 使用ラインは、 -高さ。

<div>some text<br/>line 2</div> 

div { 
    font-size: 5vmax; 
    padding: 0px; 
    line-height: 0.75em; 
    background:lightgray 
} 

body { 
    margin: 0; 
} 

https://jsfiddle.net/7sqdnvyh/2/

2 - あなたはそれを回避ハックする負のマージンを追加することができます。

<div>some text</div> 

div { 
    font-size:5vw; 
    margin-top:-15px; 
} 

https://jsfiddle.net/7sqdnvyh/1/

Answer 2

これはおそらく（システムフォントを含む）ほとんどのフォントは、トップと各グリフのバウンディングボックスの底まで完全に延びていないことに起因します。これは、たとえ要素の高さが1emであっても、大文字が要素の上端に触れないことを意味します。

これを解決するには、フォントを試して、文字の上端と下端がどこになるかを確認します。これはフォントごとに異なる場合があり、アセンダの高さにも依存します。しばしば、上昇部はキャップの高さよりも高い。 Times New Roman、以下の作品もキャップ用のために

：

<span>Foobar</span> 

span { 
    background: #ddd; 
    display: inline-block; 
    line-height: .70em; 
    vertical-align: text-top; 
} 

ここで変更する行は、行の高さです。これで遊んでみると、必要な結果が得られるはずです。たとえば、.70は、まだ "O"ビットをクリップします。

私は、フォントを必要以上に大きくし、行の高さにダイヤルして戻して縮小することを推奨します。

span { 
 
    background: #ddd; 
 
    display: inline-block; 
 
    line-height: .70em; 
 
    vertical-align: text-top; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font: serif; 
 
    font-size: 20vw; 
 
}

<span>FOOBAR</span>