文字の高さとbackground-colorの高さの関係について

Question

ご回答者様

いつもお世話になっております。

「文字の高さとbackground:colorの高さの関係」について質問させていただければと思います。

例として以下のコードを作成しました。

<p class="abcde">aaaaaあああ</p>

.abcde{
	background-color: aliceblue;
}

Google Chromeで確認すると、次のように表示されます。

画像が小さくて恐縮ですが、
文字の高さがbackground-color: aliceblue;の高さより低く、それらが一致しないのはなぜでしょうか？
p要素の背景に色を付けているだけなので、「aaaaa」か「あああ」の文字の高さとbackground-color: aliceblue;の高さが一致するものだと思っておりました。
今回は、「aaaaa」と「あああ」を合わせて記述していますが、「aaaaa」か「あああ」だけを書いても同じ結果となります。
文字の高さと背景色のルールみたいなものがある気がしまして、ご質問させていただきました。

宜しければご教授の程よろしくお願いします。

Answer 1

この記事がわかりやすいです。

【理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp】
https://html5experts.jp/takazudo/13339/

Comments

[bah91929]

kei344様
ご回答ありがとうございます！
リンク先の記事確認しました！
分かりやすいですね、ありがとうございます(^^)

Answer 2

line-heightが行間の高さを表します。
これを文字の高さと一致させることによって、質問の内容は解決します
https://developer.mozilla.org/ja/docs/Web/CSS/line-height

Comments

[bah91929]

早速のご回答ありがとうございます。
言葉足らずで恐縮ですが、なぜ高さが一致しないのかの理屈（理論）を教えていただければと思い、ご質問させていただきました。
そちら宜しければご教授くださいますと幸いです。

[macaron_xxx]

提示されたURL読みましたか？そこにすべて書かれていますが。

[yamato_user]

回答のURLのページ内の　CODE　PEN　のページです。
ここを見ていただければ、一目瞭然化と。。。。

https://codepen.io/pen/?&editable=true

＞　高さが一致しないのかの理屈（理論）教えていただければと思い
理論。。。CSSでレイアウトを細かく定義できる様に、font-sizeとline-heightを分けています

[yamato_user]

あ。。。URL張れない。。。回答のURLのページ内のCodePenのページ見てください

[bah91929]

ryounaman19様
ご回答ありがとうございます。
URLを確認しました。
今回の例のコードではfont-sizeとline-heightを指定していないため、
デフォルトのfont-sizeは16pxでline-heightはnormal。
いただいたURLの
ーーー
normal
ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
ーーーー
上記によって、line-heightが16px×1.2=19.2となるので、文字の高さとbackground-colorの高さが異なるという理解でよろしいでしょうか？

[yamato_user]

あってます(^▽^)

[bah91929]

承知しました！
ありがとうございます(^^)