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

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 Eigenschaft line-height-step wird als eines der folgenden Elemente spezifiziert:

  • ein <length>.

Werte

<length>

Die angegebene <length> wird zur Berechnung der Zeilenhöhenschritt verwendet.

Formelle Definition

Anfangswert0
Anwendbar aufBlockcontainer
VererbtJa
Berechneter Wertabsolute <length>
Animationstypby 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.

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 unten im folgenden Screenshot gezeigt:

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

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.

Browser-Kompatibilität

Siehe auch