CSSでの行の高さの使用を深く理解する
行の高さ（行の高さ）とは何ですか？
行の高さは、2行のテキストのベースライン間の距離を指します。
ベースラインは何ですか？
ベースライン、ボトムライン、トップライン、ミドルライン
注：
ベースラインは漢字の下端ではなく、英字「x」の下端です。
フォントが異なれば、ベースラインも異なります。
インラインボックスモデルとは何ですか？
次のコードで説明します
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
カセット4に含まれるこのコードでは、
コンテンツ領域のコンテンツ領域は領域を指します（線要素の表示：インラインの背景-色は下と上の金属線の小包に
性別を示します）、実際には必ずしも表示されませんが、存在します。font-sizeの値や単語数によって、コンテンツ領域のサイズが変わります。
インラインボックス。インラインボックスは、コンテンツをブロックに配置するのではなく、並べます。外部インラインレベルラベル（span、a、emなど）がインラインボックスに属している場合、それが裸のテキストである場合、それは匿名のインラインボックスに属します。
ラインボックス。各行はラインボックスです。各ラインボックスは、インラインボックスで構成されています。
含むボックスにはボックスが含まれます。収容ボックスは、ラインボックスボックスで構成されています。<p>ラベルは、収容ボックスを表します。（上の図の緑色の部分）
line-heightの高さメカニズムは、インライン要素の高さのパフォーマンスを深く理解しています。
原理を説明する前に、次のコードを見てみましょう。
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
console.log(document.querySelector('p').clientHeight); // 输出36px
ここで、次の質問について考えます
。要素の高さはどこから来るのですか？
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
<p>这是一行普通的文字，这里有个<em>em</em>标签</p>
console.log(document.querySelector('p').clientHeight); // 输出36px
内部のテキストでサポートされていますか？
答えは次のとおりです。要素の高さはline-heightによって決定されます
。line-heightは明らかに2つのベースライン間の距離です。ここで、1行のテキストの行の高さが入力されて高さを制御しますか？
その継承により、行の高さは、単一行のテキストでさえ、あらゆる場所に影響を及ぼします。
高さのパフォーマンスは、行の高さではなく、コンテンツ領域と行の間隔です。
コンテンツ領域の高さ+行間隔=行の高さ
コンテンツ領域の高さは、フォントサイズとフォントにのみ関連し、行の高さとは関係ありません。（simsunフォントでは、コンテンツ領域の高さは
font-sizeと同じです）。言い換えると、simsunフォントでは：font-size + line interval = line-height
行間隔は上下に均等に分割されます。
概要：
行の高さによってインラインボックスの高さが決まります。行の間隔は草の壁であり、大きくても小さくても（負の場合でも）、高さが行の高さと正確に等しくなるようにします。
複数行のテキストの高さは、単一行のテキストの累積の高さと同じです。line-height normal line-height：normalの
さまざまな属性値;デフォルトの属性値はブラウザに関連しており、要素のフォントに関連しています。line-height：1.5;現在の要素のフォントサイズに従って計算された値を行の高さとして使用します。line-height：1.5em;、line-height：1.5rem;、line-height：20px;行の高さの値として特定の単位を使用します。line-height：150％線の高さの値としてパーセンテージを使用します。line-height属性が設定された要素のフォントサイズを基準にしています。行の高さを継承するデフォルトは継承されますが、なぜこれを行うのですか？？？親要素の行の高さを継承するのではなく、制御要素のデフォルトの行の高さは通常です。line-height：1.5、line-height：1.5em、line-height：150％の違いは計算結果では同じですが、影響を受ける要素は異なります。line-height：1.5継承可能なすべての要素は、font-sizeに従って行の高さを再計算します。（つまり、子要素の行の高さは、独自のフォントサイズ* 1.5に従って計算され、各子要素は1回計算する必要があります。）line-height：150％/ 1.5em、現在の要素はfont-sizeに従って計算されます。次の要素に継承されます。（現在の要素はに基づいています
input{line-height:inherit;} ,行高继承。使用 inherit 可以让文本框样式可控性更强。
font-sizeは行の高さを計算し、計算された値を子孫に継承します。つまり、計算には現在の要素のみが必要であり、子要素を
再計算する必要はありません。）
本文のグローバル値を使用した経験
ブログの場合、主に読んだウェブページ、行の高さ：1.5 /1.6の方が適切です。
ユーザー指向のWebページであり、リーダー指向のWebページではない場合は、20ピクセルに一致するエクスペリエンスを使用することをお勧めします。
body{font-size:14px;lineheight：1.4286} 或者合并形式 body{font:14px/1.4286 'microsoft yahei'}
line-height 与图片高度表现。
line-height 不会影响图片的高度。
非表示のテキストノード： <p>ラベルはテキストノードであり、デフォルトでテキストが含まれています。<p></p>コンテンツが空の場合でも、テキストノードはありますが、表示されません。このようなノードは隠しテキストノードと呼ばれ、次の図の状況が発生するのは、隠しテキストノードが存在するためです。
写真と下の隙間をなくすには？
プロジェクト開発では、次の状況が発生すること
があり
ます。主な解決策は3つあります。1。画像がブロック状である。（vertical-align）は、インライン要素とインラインブロック要素にのみ適用されます。つまり、ブロック要素のベースライン配置はありません。
img{display:block;}
2.画像の一番下の行を揃えます
img{vertical-align:bottom;}
3.行の高さは、ベースラインを上に移動させるのに十分小さいです。
.box{line-height:0} line-height的实际应用
1.可変サイズと複数行のテキストの垂直方向の中央揃えで画像を実現します
2.複数行のテキストの水平方向と垂直方向の中央揃えを実現します
