text-box-trim / text-box-edge (text-box shorthand)

Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 em agosto de 2026).

Chrome 133Edge 133Safari 18.2Firefox 154

Apara o espaço extra acima da altura de caixa alta e abaixo da linha de base dentro de uma line box, então o texto fica opticamente centralizado em botões e os títulos encostam no topo do container. Elimina os ajustes de padding com números mágicos.

CSS

.fx-035 button {
  font: 600 22px/1 system-ui;
  padding: 12px 18px;
  border: 2px solid #2563eb;
  background: #fff;
  border-radius: 8px;
  margin-right: 8px
}
.fx-035 button:not(.raw) {
  text-box: trim-both cap alphabetic
}
.fx-035 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-035"><button>Trimmed</button><button class="raw">Untrimmed</button></div>

Fallback: Navegadores sem suporte mantêm a line box normal; a diferença é de alguns pixels de espaço extra.

Fonte: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/css-text-box-trim

Prompt

Aplique `text-box: trim-both cap alphabetic` a botões, selos e títulos grandes para os glifos (não a line box) serem o que fica centralizado e alinhado. Use isso em vez de padding assimétrico ajustado à mão ou margens negativas; suportado nas três engines desde o Firefox 154.