行の高さ

クラス

leading-<name> が設定するのは line-height だけです。フォントサイズ、段落間の余白、段落の高さの制約は変更しません。

値

5 つのプリセット値はすべて単位なしの比率であり、rem 単位の長さやピクセル数ではありません。実際の行の高さは、要素のフォントサイズによって決まります。

継承した比率は各要素のフォントサイズに従う

leading-md は数値 1.6 を指定します。継承した子要素は自身のフォントサイズを使うため、16px なら 25.6px、24px なら 38.4px になります。継承される値は、引き続き比率です。

子要素は単位なしの 1.6 を継承し、異なるフォントサイズを使います。薄い色の帯が示すのは行ボックス全体であり、字形の間の空白ではありません。列の幅は同じです。

テキストによる説明

1. 共通の親要素は leading-md を使い、そのプリセット値は数値の 1.6 です。
2. 最初の子は、ルートのフォントサイズが 16px の状態で font-md を使い、テキストは 16px、行の高さは 25.6px になります。
3. 2 番目の子は font-2xl を使い、テキストは 24px、行の高さは 38.4px になります。継承するのは同じ比率であり、固定の 25.6px という長さではありません。
4. 各列には同じ 3 行のテキストが入っています。色付きの帯は行ボックス全体を確認する注記であり、leading-md が生成する padding や gap ではありません。

明示的な長さや百分率は継承の動作が異なり、宣言された要素で長さに解決されます。独自の比率には、(line-height:1.5) のようなネイティブ宣言を使うか、テーマトークンを追加します。プリセットには leading(1.5) 関数はありません。

行の高さが制御するのは行の縦方向の寸法であり、見えている字形同士の空白ではありません。ほかのインライン内容によって行ボックスが高くなることもあります。字形を切り取ったり、段落の高さを固定したりする指定ではありません。

text-* のテキストスタイルは自身の行の高さを設定するため、継承した比率を置き換えます。意図的に上書きするには、同じ要素に leading-* を適用します。同じ条件では、単一プロパティのユーティリティが組み合わせスタイルより後になります。

関連項目： テキストスタイルの付随トークン、ネイティブの line-height の継承.

使用例

親要素に比率を指定し、子要素で各自のフォントサイズに応じた行の高さを使います。

<div class="… leading-md">  <p class="… font-sm">The same ratio follows this…</p>  <p class="… font-lg">The same ratio follows this…</p></div>

@layer theme {  :root,  :host {    --leading-md: 1.6;    --font-size-sm: .875rem;    --font-size-lg: 1.125rem  }}@layer utilities {  .font-lg {    font-size: var(--font-size-lg)  }  .font-sm {    font-size: var(--font-size-sm)  }  .leading-md {    line-height: var(--leading-md)  }}

カスタマイズ

プリセット値を変更したり、トークンを追加したりできます。--leading-prose を定義すると leading-prose が使えるようになります。

@theme {  --leading-prose: 1.7;}

@layer theme {  :root,  :host {    --leading-prose: 1.7  }}@layer utilities {  .leading-prose {    line-height: var(--leading-prose)  }}

関連項目： テーマのディレクティブ、タイポグラフィ.