lh / rlh units (and rcap, rch, rex, ric)

`lh`/`rlh` Baseline breit verfügbar Mai 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147).

Chrome 109Edge 109Safari 16.4Firefox 120

`lh` ist die line-height des Elements, `rlh` die der Wurzel, sodass Abstände in Zeilen ausgedrückt werden können: Icons, die zur Zeilenhöhe passen, Margins auf einem vertikalen Rhythmus, Textarea-Höhen in Zeilen.

Icon sized to exactly one line.

CSS

.fx-038 {
  font: 16px/1.6 system-ui;
  margin-block: 1rlh;
  display: flex;
  gap: .5lh;
  align-items: center
}
.fx-038-icon {
  width: 1lh;
  height: 1lh;
  border-radius: 50%;
  background: #2563eb;
  flex: none
}

HTML

<p class="fx-038"><span class="fx-038-icon"></span> Icon sized to exactly one line.</p>

Fallback: Breit verfügbar; keine Absicherung nötig.

Quelle: web.dev/blog/baseline-digest-may-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147

Prompt

Nutze `lh` für alles, was zu einer Textzeile passen soll (Inline-Icons, Avatare in Listen, Textarea-min-height) und `rlh` für Block-Margins, um einen vertikalen Rhythmus zu halten. Bevorzuge diese gegenüber `em` für vertikale Maße.