テキストの4本の線、上から順に頂線、中线、基線、底线です。
-
行高：上下のテキスト行の基線間の垂直距離を指し、図中の赤い2本の線の間の垂直距離です。（図中の上下の同色線の間の垂直距離）
-
行間：1行の底线から次の行の頂線までの垂直距離を指します。
-
半行間：行間の半分
1.コンテンツ領域：
テキスト行の各要素はコンテンツ領域を生成します。これはフォントサイズによって決定されますが、高さはフォントサイズと等しくありません。コンテンツ領域はインラインボックスを生成します。
他の要因がない場合、このインラインボックスは要素のコンテンツ領域と完全に一致します。line-heightによって生成される行間隔は、インラインボックスの高さに影響を与える要因の一つです。
2.インラインボックス：インラインボックスはブラウザのレンダリングモデルにおける概念です。表示されません。デフォルトではコンテンツ領域と等しくなります。line-heightの計算値からfont-sizeの計算値を引くと、総行間が得られます。この値は負になる可能性があります。行間隔を2で割った値をそれぞれコンテンツ領域の上部と下部に適用すると、その要素のインラインボックスが得られます。
3.行ボックス：行ボックスはその行の仮想的な矩形ボックスです。ブラウザのレンダリングモデルにおける概念であり、実際には表示されません。デフォルトでは、行ボックスの高さはその行内のすべての要素の中で最も大きいインラインボックスの値に等しくなります（垂直方向に整列する場合、行高値が最も大きいインラインボックスを基準とし、他のインラインボックスは独自の整列方法で基準に整列し、最終的に行ボックスの高さを計算します）。複数行のコンテンツがある場合、各行は独自の行ボックスを持ちます。
結論：上記の概念は実際の状況と一致しないようです。
個人的なまとめ
1.コンテンツ領域のサイズはフォントサイズによって決定されますが、フォントサイズより大きくなります。デフォルトでは、行ボックスはコンテンツ領域の高さと位置と等しくなります。
2.行高が指定されている場合、行高がフォントサイズより大きい場合、行ボックスの高さは行高の高さに等しくなり、フォントと行ボックスは中央揃えになります。
行高がフォントサイズより小さい場合、行ボックスの高さは縮小しますが、行高に等しくなりません。また、行ボックスはフォントと中央揃えにもなりません。
したがって、行高を設定する際は、行高をフォントサイズより大きくするようにしてください。
3.行ボックスの高さは親要素の高さを決定します（親要素の高さが設定されていない場合）
4.行高は継承できます。因子値のみが子要素に継承され、換算前の因子値が継承されます。その他は換算後のピクセル値が継承されます。
行高の最も一般的な機能：単行テキストの垂直方向の中央揃え（要素の高さと同じ値をline-heightに設定）
実例
<body>
<div id="container">
<span id="textElement">日本語English</span>
</div>
</body>
CSSコード1：行高を指定しない場合
#container {
background: lightblue;
width: 350px;
margin: 120px auto;
}
#textElement {
background: skyblue;
font-size: 36px;
/* line-height: 72px; */
}
CSSコード2：行高がフォントサイズより大きい場合
#container {
background: lightblue;
width: 350px;
margin: 120px auto;
}
#textElement {
background: skyblue;
font-size: 36px;
line-height: 72px;
}
CSSコード3：行高がフォントサイズより小さい場合（おそらく行ボックスの底部が底线と揃う？）
#container {
background: lightblue;
width: 350px;
margin: 120px auto;
}
#textElement {
background: skyblue;
font-size: 36px;
line-height: 18px;
}