Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
The 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;
Initial value | 0 |
---|---|
Applies to | block containers |
Inherited | yes |
Media | visual |
Computed value | absolute <length> |
Animation type | discrete |
Canonical order | per grammar |
Syntax
The line-height-step
property is specified as any one of the following:
- a
<length>
.
Values
Formal syntax
<length>
Examples
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:
Specifications
Specification | Status | Comment |
---|---|---|
CSS Rhythmic Sizing The definition of 'line-height-step' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-height-step | Chrome
Full support
60
| Edge No support No | Firefox No support No | IE No support No | Opera
Full support
47
| Safari No support No | WebView Android
Full support
60
| Chrome Android
Full support
60
| Firefox Android No support No | Opera Android
Full support
44
| Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.