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

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

1. line-height 構文

line-height 属性の具体的な定義リストは次のとおりです。 | < ;Percent> | 継承

説明

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

可能な値:

値

説明 %inherit

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 の使用法についてのエディターの包括的な理解です。サポートしていただければ幸いです。ウェブサイト

	normal デフォルトでは、適切な行間隔を設定します。
数値	数値を設定します。この数値に現在のフォント サイズを乗算して、行間隔を設定します。固定行間隔を設定するための
length	の倍数に相当します。
現在のフォント サイズに基づくパーセントの行間隔。
は、line-height 属性の値が親要素から継承される必要があることを指定します。

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