line-height-step CSS property
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die line-height-step-Eigenschaft CSS legt die Schrittgröße für die Höhen von Zeilenboxen fest. Wenn die Eigenschaft gesetzt ist, werden die Höhen der Zeilenboxen auf das nächstgelegene Vielfache der Einheit aufgerundet.
Syntax
/* 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;
Die line-height-step-Eigenschaft wird als eines der folgenden Elemente angegeben:
- ein
<length>.
Werte
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | Blockcontainer |
| Vererbt | Ja |
| Berechneter Wert | absolute <length> |
| Animationstyp | by computed value type |
Formale Syntax
line-height-step =
<length [0,∞]>
Beispiele
Festlegen der Schrittgröße für die Zeilenboxhöhe
Im folgenden Beispiel wird die Höhe der Zeilenbox in jedem Paragraphen auf die Schrittgröße aufgerundet. Die Zeilenbox in <h1> passt nicht in eine einzelne Schrittgröße und nimmt daher zwei ein, bleibt aber innerhalb der zwei Schrittgrößen zentriert.
:root {
font-size: 12pt;
--my-grid: 18pt;
line-height-step: var(--my-grid);
}
h1 {
font-size: 20pt;
margin-top: calc(2 * var(--my-grid));
}
Das Ergebnis dieser Regeln wird im folgenden Screenshot gezeigt:
Spezifikationen
Derzeit unterstützt kein Browser dieses Feature.
Browser-Kompatibilität
Siehe auch
fontfont-sizeline-height- CSS Rhythmic Sizing Spezifikation