CSS line-height の使用方法を包括的に理解する

この記事の紹介: 「行の高さ」とは、テキストの行の高さ、特にテキストの 2 行間のベースライン間の距離を指します。 CSS では、行の高さは行間の垂直方向の距離を制御するために使用されます。 line-height 属性は、行ボックスのレイアウトに影響します。ブロックレベル要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。すべてのブラウザは line-height プロパティをサポートしています。

1. line-height 構文

: line-height 属性は行間の距離 (行の高さ) を設定し、負の値は使用できません。このプロパティは、ライン ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。計算された line-height と font-size (行間隔) の差は 2 つの半分に分割され、テキスト行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはライン ボックスです。

値

2. 行の高さのトップライン、ミドルライン、ベースライン、ボトムラインの例

イラスト

4本のラインは上から下に、トップライン、ミドルライン、ベースラインとボトムラインは、英語の文字を学習するときに使用される 4 つの線と 3 つのグリッドに非常に似ており、vertical-align 属性には、これら 4 つの線に関連する top、middle、baseline、bottom があることがわかります。

特に、ベースラインは収益ではなく、収益は収益であることを覚えておいてください。

3. 行の高さ、行の高さ、行間隔、および半行間隔

行の高さは、コンテキストラインのベースライン間の垂直距離、つまり、コンテキストライン間の垂直距離を指します。写真の赤い線が2本あります。

レギンスとは、ある列の一番下の線から次の列の一番上の線までの垂直距離、つまり、最初の列のピンクの線と2番目の列の緑色の線の間の垂直距離を指します。

半行間隔は行間隔の半分、つまりエリア3/2の垂直距離、エリア1、2、3、4の距離の合計が行の高さ、距離の合計です。エリア1、2、4の はフォントサイズなので、半行間隔 また、(行の高さ - フォントサイズ)/2

絵の説明

4のように計算することもできます。 line-height では、コンテンツエリア、インラインボックス、ラインボックス

コンテンツエリア: 一番下の行と一番上の行で囲まれた領域、下の図の濃い灰色の背景領域です。

インラインボックス、各インライン要素はインラインボックスを生成します。インラインボックスはブラウザレンダリングモデルの概念であり、他の要素（パディングなど）がない場合には表示できません。ボックス 行の高さを設定すると、ボックスの高さは変更されず、半行間隔 [(行の高さ-フォント サイズ)/2] が上に増加/減少します。

ラインボックス(line box)、ラインボックスとは、ブラウザのレンダリングモードにおける概念であり、実際にはありません。表示されます。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)配置方法、および行ボックスの高さが最終的に計算されます) 複数の行コンテンツがある場合、各行には独自の行ボックスが存在します。

例

絵の説明

5. 行の高さの定義方法

1. 行の高さは通常どおり定義できます。

body { line-height:normal; }

2. Line-height は継承として定義できます

p { line-height:inherit; }

3. line-height:120%; }

4. line-height は長さの値 (単位 px、em など) として定義できます

p { line-height:20px }

5。 (単位なしでも) 純粋な数値としても定義されます

p { line-height:1.2; }

上記は、CSS line-height の使用法についてのエディターの包括的な理解です。サポートしていただければ幸いです。ウェブサイト

以上がCSS line-height の使用方法を包括的に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。