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

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

Eine <length>.

Werte

<length>: Die angegebene <length> wird bei der Berechnung der Schrittgröße der Zeilenboxhöhe 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

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.

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 des Textes beeinflusst.

Spezifikationen

Derzeit unterstützen keine Browser diese Funktion.

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