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 Zeilenhöhen fest. Wenn diese Eigenschaft gesetzt ist, werden die Zeilenhöhen 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 Eigenschaft line-height-step wird als eines der folgenden Elemente spezifiziert:
- ein
<length>.
Werte
Formelle 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 Zeilenhöhe
Im folgenden Beispiel wird die Höhe der Zeilenbox in jedem Absatz auf die Schrittgröße aufgerundet. Die Zeilenbox in <h1> passt nicht in eine einzelne Schrittgröße und beansprucht daher zwei, wird jedoch 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 unten im folgenden Screenshot gezeigt:
Spezifikationen
No specification found
No specification data found for css.properties.line-height-step.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.