行高

類別

leading-<name> 只會設定 line-height，不會改變字型大小、加入段落間距或限制段落高度。

值

五個預設值都是無單位比例，不是 rem 長度或像素數量。實際使用的行高取決於元素的字型大小。

繼承的比例會依各自字型大小計算

leading-md 提供數值 1.6。子元素繼承後會使用自己的字型大小：16px 得到 25.6px，24px 則得到 38.4px。被繼承的值仍然是比例。

子元素繼承無單位的 1.6，並使用不同字型大小。淡色區帶顯示完整行框，不是字形之間的空白間隙。兩欄寬度維持相同。

文字說明

1. 共用的父元素使用 leading-md，其預設值為數字 1.6。
2. 第一個子元素使用 font-md，根元素字型大小為 16px，因此文字為 16px、行高為 25.6px。
3. 第二個子元素使用 font-2xl，得到 24px 文字與 38.4px 行高。它繼承的是相同比例，不是固定的 25.6px 長度。
4. 每欄都包含相同的三行文字。有色區帶是完整行框的檢查標註，不是 leading-md 產生的 padding 或 gap。

明確的長度或百分比具有不同的繼承行為：它會在宣告所在元素解析為長度。需要自訂比例時，請使用 (line-height:1.5) 這類原生宣告，或新增主題 token；預設集沒有 leading(1.5) 函式。

行高控制的是文字行的垂直度量，不是可見字形之間的空白間隙。其他行內內容可能讓行框更高。行高不會裁切字形，也不保證段落具有固定高度。

text-* 文字樣式會設定自己的行高，因此會取代繼承的比例。若要刻意覆寫這組樣式，請在同一元素套用 leading-*；條件相同時，單一屬性的 utility 會排在組合樣式之後。

另見 文字樣式的配套 token與原生 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)  }}

自訂

修改預設值或新增 token：--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)  }}

另見 主題指令與文字排版.