Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
line-height-step
Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Dieline-height-stepCSS-Eigenschaft legt die Schrittgröße für die Höhe der Zeilenboxen fest. Wenn die Eigenschaft gesetzt ist, werden die Höhen der Zeilenboxen auf das nächste Vielfache der Einheit aufgerundet.
In diesem Artikel
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;Dieline-height-step-Eigenschaft wird als eines der folgenden angegeben:
- Eine
<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 Höhe der Zeilenbox
Im folgenden Beispiel wird die Höhe der Zeilenbox in jedem Absatz auf die Schrittgröße aufgerundet. Die Zeilenbox im<h1> passt nicht in eine Schrittgröße und belegt daher zwei, ist aber immer noch 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ützen keine Browser diese Funktion.
Browser-Kompatibilität
Siehe auch
fontfont-sizeline-height- CSS Rhythmic Sizing Spezifikation