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 Schritteinheit für Zeilenboxhöhen fest. Wenn die Eigenschaft gesetzt ist, werden Zeilenboxhöhen auf das nächste 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;

Die line-height-step Eigenschaft wird als eines der folgenden Elemente angegeben:

ein <length>.

Werte

<length>: Der angegebene <length> wird bei der Berechnung des Zeilenboxhöhen-Schritts 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,∞]>

Im folgenden Beispiel wird die Höhe der Zeilenbox in jedem Absatz auf die Schritteinheit aufgerundet. Die Zeilenbox im <h1> passt nicht in eine Schritteinheit und nimmt daher zwei ein, ist aber dennoch innerhalb der zwei Schritteinheiten 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 line-height-step Eigenschaft das Erscheinungsbild von Text beeinflusst.

Spezifikationen

Derzeit unterstützen keine Browser dieses Feature.

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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