ボックスモデルに未知のスペースが予約されています

Question

<div>をテキストで作成しました。 <div>の幅とパディング、およびその内部のテキストのfont-sizeを設定しました。以下の競合を要約抜粋である：

.container { 
 
    width:  300px; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
}

<div class="container"> 
 
    Hello 
 
</div>

私はChromeでレイアウトを見たときのコードによれば、（JavaScriptでoffsetHeightある）全高が、しかし、36でありますdevツールでは、高さは38です。したがって、2pxはどこから来たのですか？

Answer 1

余分な高さはline-heightプロパティによって発生します。

line-heightの初期値はnormalです。

これは、according to the specで、ブラウザに値を1.2に設定するように指示します。これにより、ラインボックスの内側にテキストが垂直に詰め込まれます。

問題を解決するには、line-height: 1をコードに追加してください。

Answer 2

ブラウザは、デフォルトの行の高さをテキストに実装します。したがって、この場合、テキストの1ピクセル下にあります。 line-height: 16px;