`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 CSS Eigenschaft legt die Schrittgröße für Zeilenbox-Höhen fest. Wenn die Eigenschaft gesetzt ist, werden die Zeilenbox-Höhen auf das nächstgelegene Vielfache der Einheit aufgerundet.

Syntax

css

/* 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;

Werte

Diese Eigenschaft wird als folgender Wert angegeben:

<length>: Die angegebene <length> wird bei der Berechnung der Zeilenbox-Höhen-Schrittgröße verwendet.

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

Schrittgröße für Zeilenbox-Höhe festlegen

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 Schrittgröße und nimmt daher zwei ein, ist jedoch weiterhin innerhalb der zwei Schrittgrößen zentriert.

css

: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:

Wie die Eigenschaft line-height-step das Erscheinungsbild von Text beeinflusst.

Spezifikationen

Derzeit wird dieses Feature von keinem Browser unterstützt.

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

line-height-step CSS property

Help improve MDN

`line-height-step` CSS property