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;
Syntax
The line-height-step
property is specified as any one of the following:
- a
<length>
.
Values
Formal definition
Initial value | 0 |
---|---|
Applies to | block containers |
Inherited | yes |
Computed value | absolute <length> |
Animation type | discrete |
Formal syntax
<length>
Examples
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:
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-height-step | Chrome
Full support
60
| Edge
Full support
79
| Firefox No support No | IE No support No | Opera
Full support
47
| Safari No support No | WebView Android No support No | Chrome Android
Full support
60
| Firefox Android No support No | Opera Android
Full support
44
| Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- 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.