インライン要素にline-heightを指定しても背景色は広がりませんが、インラインブロック要素や、ブロック要素なら広がります。何故ですか。

Question

前提・実現したいこと

発生している問題・エラーメッセージ

インライン要素にline-heightを指定しても背景色は広がりませんが、インラインブロック要素や、ブロック要素なら広がります。何故ですか。

該当のソースコード

<a class="a inline">aaa</a>
<a class="a inline-block">aaa</a>
<a class="a block">aaa</a>

css
.a {
  background-color: red;
}

.inline {
  line-height: 40px;
}

.inline-block {
  line-height: 40px;
  display: inline-block;
}

.block {
  line-height: 40px;
  display: block;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

自身が検証したコードを提示してください

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

Answer 2

非置換インライン要素は高さを持ちません。

適用対象 非置換インライン要素、テーブルの列、列グループを除くすべての要素

height - CSS: カスケーディングスタイルシート | MDN

非置換インライン要素のコンテンツ領域はフォントに従うべき、とありますが、その具体的な方法については仕様がありません。なので、コンテンツ領域が行ボックスの高さと関連するとは限りません。

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how.

10.6.1 Inline, non-replaced elements | Visual formatting model details