行の高さ+上下paddingの和が、検証ツールの示す要素の高さと一致しない理由

Question

●内容
[フォントサイズ] x [line-heightの値]で求めた行の高さと上下paddingの和が、
デベロッパーツールの示す要素の高さと一致しない理由を知りたい。

●経緯
ボタンを作成し、以下cssを適用しました。
※font-family: 'Noto Sans JP', sans-serif;

.btn{
    display: block;
    width: 208px;
    margin: 0 auto;
    padding: 11px 11px 13px;
    box-sizing: border-box;
    border: solid 2px #2e5180;
    border-radius: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #2e5180;
}

Chromeデベロッパーツールで該当のボタンを確認すると、高さ：52pxとなっています。

ボーダーを除いた場合の高さは
52px - 4px(上下ボーダーの幅) = 48px となるはずですが、
実際に各要素の高さから計算してみると
16px (フォントサイズ) + 11px (padding-top）+ 13px (padding-bottom) =
40px となり、8px分合いませんでした。

以下は、line-heightを追加して検証した結果です。
これによると、どうやらデフォルトでline-height: 1.25 が適用されているようでした。

line-height指定値	要素の高さ(上下ボーダー幅を除く)
line-height:0	28px
line-height:1	44px
line-height:1.1	45px
line-height:1.2	47px
line-height:1.25	48px

ここで改めて計算してみると
20px(フォントサイズ16px x line-height1.25) + 11px (padding-top）+ 13px (padding-bottom)
= 44px となり、
やはりデベロッパーツールが示している要素の高さ48pxとは一致しません。
残りの4pxは何に起因しているのでしょうか。

Comments

[Lhankor_Mhy]

当方の環境では、問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/of1vcwLk/

上記ページで、ご提示のコードを試してみましたが、line-height: 1.25 で、ボーダーを除いた高さは、dancing_bonitoさんとは異なり、44px となりました。
dancing_bonitoさんの環境で、上記ページでは、line-height: 1.25 で、ボーダーを除いた高さはいくつになっていますか？

44pxになるのであれば、ご提示いただいていない部分に原因がありそうです。
44pxにならないのであれば、環境の問題かもしれません。

[dancing_bonito]

ありがとうございます。

今、再度確認を行ったところ
line-height:1.25の場合、要素の高さは仰るとおり44pxになりました。

※質問文中に記載したline-heightの値を様々変えての試行結果は、
何らかの原因によりcssファイル更新後の最新の値が表示されているものではなかったようで、正確性に欠けるものだったことが今判明しました。
（リロード忘れ等だった可能性も多分に考えられます）

お手数をおかけいたしました。
返信感謝申し上げます。

Answer 1

line-height は　1.5 です。

16px * 1.5 = 24px

paddingの上下を合わせて 24px

borderの上下を合わせて4px

全部足して52px

(補足)
line-heightの求め方

font-size * line-height = フォントの高さ

line-height = フォントの高さ / font-size

Comments

[dancing_bonito]

ありがとうございます。
全体の高さから逆算する方法を思いつきませんでした。

今、再度確認を行ったところ
line-height:1.5の場合、仰るとおりの結果になることを確認しました。

※質問文中に記載したline-heightの値を様々変えての試行結果は、
何らかの原因によりcssファイル更新後の最新の値が表示されているものではなかったようで、正確性に欠けるものだったことが今判明しました。
（リロード忘れ等だった可能性も多分に考えられます）

シンプルな解をありがとうございました。