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

`lh`/`rlh` Baseline amplamente disponível em maio de 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147).

Chrome 109Edge 109Safari 16.4Firefox 120

`lh` é o line-height do elemento, `rlh` o da raiz, então o espaçamento pode ser expresso em linhas: ícones que batem com o line-height, margens num ritmo vertical, alturas de textarea em linhas.

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: Amplamente disponível; nenhuma proteção necessária.

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

Prompt

Use `lh` para qualquer coisa que deva bater com uma linha de texto (ícones inline, avatares em listas, min-height de textarea) e `rlh` para margens de bloco para manter um ritmo vertical. Prefira estas a `em` para medidas verticais.