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

Estado: Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 en agosto de 2026).  
Fuente: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154 and https://caniuse.com/css-text-box-trim  
Página: https://designforai.dev/es/css/text-box-trim

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.

## HTML

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

## CSS

```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; }
```

Fallback: Los navegadores sin soporte conservan la caja de línea normal; la diferencia son unos pocos píxeles de espacio extra.

## 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.