在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

line-height-step CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.

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

句法

line-height-step property is specified as any one of the following:

• a <length> .

值

<length>

The specified <length> is used in the calculation of the line box height step.

形式定义

初始值	0
适用于	block containers
继承	yes
计算值	absolute <length>
动画类型	discrete

形式句法

<length>
					

范例

Setting step unit for line box height

In the following example, the height of line box in each paragraph is rounded up to the step unit. The line box in <h1> does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.

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

The result of these rules is shown below in the following screenshot:

规范

规范	状态	注释
CSS Rhythmic Sizing The definition of 'line-height-step' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
line-height-step Experimental	Chrome 完整支持 60 Disabled 完整支持 60 Disabled Disabled From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.	Edge 完整支持 79 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 47 Disabled 完整支持 47 Disabled Disabled From version 47: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 完整支持 60 Disabled 完整支持 60 Disabled Disabled From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.	Firefox Android 不支持 No	Opera Android 完整支持 44 Disabled 完整支持 44 Disabled Disabled From version 44: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• font
• font-size
• line-height

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step