行高

类

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) 这类原生声明，或添加主题令牌；预设没有 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)  }}

另见 主题指令与文字排版.