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

`lh`/`rlh` Baseline disponible de forma generalizada en mayo de 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147).

Chrome 109Edge 109Safari 16.4Firefox 120

`lh` es el line-height del elemento, `rlh` el de la raíz, así que el espaciado puede expresarse en líneas: iconos que coinciden con la altura de línea, márgenes sobre un ritmo vertical, alturas de textarea en líneas.

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: Disponible de forma generalizada; no hace falta protección.

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

Prompt

Usa `lh` para todo lo que deba coincidir con una línea de texto (iconos en línea, avatares en listas, min-height de textarea) y `rlh` para márgenes de bloque, para mantener un ritmo vertical. Prefiérelas a `em` para medidas verticales.