Volver a las notas

CSS text-box: por fin el texto centrado en su caja

14 de noviembre de 2026·
csstipografiauibaseline
Demo en vivoAbrir a pantalla completa

Le pones padding: 12px a un botón y la etiqueta sigue viéndose un poco descolocada: más aire encima de las letras que debajo, o al revés. No eres tú. Es la fuente. Y ya hay un arreglo de una línea que funciona en Chrome, Safari y Firefox: text-box.

Activa el interruptor de la demo de arriba y mira cómo la caja discontinua alrededor de "Hxg" se ajusta a la altura de las mayúsculas y a la línea base. El botón, la etiqueta y el número de debajo usan el mismo padding arriba y abajo en los dos estados. Solo la versión recortada se ve centrada de verdad.

Por qué el texto nunca está centrado por sí solo

Toda fuente lleva algo de espacio vertical además de las propias letras: sitio para los acentos sobre las mayúsculas y para los trazos que bajan, como la cola de la "g". Encima, line-height añade interlineado, y CSS reparte ese espacio extra en dos mitades, una encima y otra debajo del texto. Es lo que el equipo de Chrome llama half-leading.

Todo ese espacio cuenta en la altura del elemento. Así que cuando pones padding: 12px en un botón, la distancia real desde el borde superior hasta lo alto de las mayúsculas es 12px más lo que añadan la fuente y el interlineado. El apaño habitual era ajustar padding-block a ojo hasta que pareciera bien, y el artículo de Chrome señala el problema: puede quedar bien en una pantalla o sistema y mal en otro, porque cada fuente trae una cantidad de espacio distinta.

Cómo funciona

text-box es un atajo de dos propiedades:

  • text-box-trim dice qué bordes recortar: none (por defecto), trim-start, trim-end o trim-both.
  • text-box-edge dice hasta dónde recortar. El primer valor es el borde superior (text, cap o ex) y el segundo, el inferior (text o alphabetic). Su valor inicial es auto, que equivale a text.

La combinación que más vas a usar recorta hasta lo alto de las mayúsculas y hasta la línea base:

.btn {
  padding: 12px 18px;
  text-box: trim-both cap alphabetic;
}

Es justo lo que hace el botón de la demo. Lo he medido en Chromium y WebKit con la fuente del sistema en negrita a 17px y line-height: 1.4: el botón pasa de 52px de alto a 40px, y los 12px de padding son ya la distancia real entre el borde y las letras.

La versión con las propiedades largas es equivalente:

.pill {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

Una cosa que he comprobado porque es fácil equivocarse: text-box-edge sola no hace nada. MDN dice que no tiene efecto si text-box-trim no está puesta o vale none, y en mi prueba un botón con solo text-box-edge: cap alphabetic se quedó en 52px.

El valor ex recorta hasta la altura de la x en lugar de la de las mayúsculas. Pruébalo en la demo: la caja se reduce a la altura de la "x", algo útil para etiquetas solo en minúsculas o para alinear texto con un icono pequeño.

Soporte y trampas

  • Soporte: Chrome y Edge 133, Safari 18.2 y Firefox 154, publicado el 18 de agosto de 2026. MDN lo marca como Baseline 2026, disponible recientemente.
  • Los navegadores antiguos simplemente lo ignoran. No se rompe nada; tienes el espaciado de siempre. Detéctalo con CSS.supports('text-box', 'trim-both cap alphabetic') o con @supports. La versión de Firefox que usé para probar es anterior a la 154, así que allí la demo mostró su aviso y simuló el recorte con márgenes negativos calculados a partir de las métricas de texto del canvas. Para una demo vale; no es algo que llevaría a producción.
  • Depende de la fuente. Los mismos valores recortan cantidades distintas con fuentes distintas. Cambia entre sans, serif y mono en la demo y mira cómo cambia la altura de la caja.
  • Los trazos descendentes sobresalen. Con alphabetic la caja termina en la línea base, así que la cola de la "g" asoma por debajo. Es lo esperado, pero significa que lo que solo se pinta dentro de la caja, como un fondo recortado al texto, se corta. Me pasó en la primera versión de la demo con un degradado puesto con background-clip: text.
  • El texto en varias líneas se recorta por encima de la primera y por debajo de la última, no entre líneas.
  • Dónde se aplica: contenedores de bloque y cajas en línea. No se hereda, así que ponlo en el elemento cuya caja quieres ajustar.
  • Antes se llamaba leading-trim, por si encuentras artículos antiguos.

Qué vigilar

  • Los valores de borde extra. La gramática también incluye ideographic e ideographic-ink. MDN todavía no los describe, así que comprueba el soporte antes de contar con ellos.
  • Tus propios componentes. Merece la pena repasar botones, insignias y etiquetas donde el padding vertical se ajustó a mano para compensar la fuente: algunos de esos números mágicos ya pueden desaparecer.
  • El soporte real. Firefox 154 es reciente. Hasta que las versiones antiguas desaparezcan, trátalo como mejora progresiva.

Fuentes