line-height-step

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

line-height-step CSS 属性设置行框高度的步长单位。当设置此属性时，行框高度会向上舍入到该单位的最近倍数。

语法

css
/* Point values */
line-height-step: 18pt;

/* Global values */
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;

line-height-step 属性指定为以下任何一项

  • 一个 <length>。

值

<length>

指定的<length> 用于计算行框高度的步长。

正式定义

初始值0
应用于块级容器
继承是
计算值绝对<length>
动画类型按计算值类型

正式语法

line-height-step = 
  <length [0,∞]>

示例

设置行框高度的步长单位

在以下示例中，每个段落中行框的高度向上舍入到步长单位。<h1> 中的行框不适合一个步长单位，因此占用两个，但它仍然在两个步长单位内居中。

css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}

这些规则的结果如下面的屏幕截图所示

How the line-height-step property affects the appearance of text.

规范

规范
CSS 节奏大小
# line-height-step

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅