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

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

Chrome 133Edge 133Safari 18.2Firefox 154

Recorta el espacio extra por encima de la altura de las mayúsculas y por debajo de la línea base dentro de una caja de línea, así que el texto queda ópticamente centrado en los botones y los títulos se pegan al borde superior de su contenedor. Elimina los ajustes de padding con 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: Los navegadores sin soporte conservan la caja de línea normal; la diferencia son unos pocos píxeles de espacio extra.

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

Prompt

Aplica `text-box: trim-both cap alphabetic` a botones, insignias y títulos grandes para que lo que se centra y alinea sean los glifos (no la caja de línea). Úsalo en lugar de padding asimétrico ajustado a mano o márgenes negativos; soportado en los tres motores desde Firefox 154.