line-height-step
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 CSS-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.
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 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