Cómo eliminar el espacio extra encima y debajo del texto en CSS

El espacio extra encima y debajo del texto tiene dos orígenes: las métricas verticales propias de la fuente y el semiinterlineado (half-leading) que line-height añade (o resta) a cada lado de la línea. La solución nativa de CSS es text-box: trim-both cap alphabetic.

Estableciste line-height: 1.1, eliminaste todos los márgenes y, aun así, el encabezado ocupa una caja más alta que sus letras. Así que añadiste un margen negativo, lo ajustaste hasta que se veía bien y seguiste adelante. Luego cambió la fuente corporativa.

Este artículo explica de dónde viene ese espacio, por qué los márgenes negativos no pueden eliminarlo de forma fiable y cómo text-box-trim, text-box-edge y la propiedad abreviada text-box lo recortan en encabezados y botones. Al final se incluye una alternativa para navegadores antiguos.

El síntoma: un hueco que el padding no explica

Un encabezado con padding cero, margen cero y un line-height ajustado sigue mostrando espacio vacío encima de sus mayúsculas y debajo de su línea base. Las DevTools muestran que la caja de contenido es más alta que las letras visibles, y nada en tu hoja de estilos justifica la diferencia.

El parche habitual es un margen negativo encontrado por ensayo y error:

h1 {
  line-height: 1.1;
  /* Tuned by eye for one font; wrong for any other */
  margin-block: -0.2em -0.15em;
}

Esos valores son marcadores ilustrativos. No se derivan de nada, y ese es precisamente el problema.

¿Por qué hay espacio extra encima y debajo del texto?

El espacio extra encima y debajo del texto tiene dos causas, las métricas de la fuente y el semiinterlineado, y ambas pertenecen al texto, no al modelo de caja.

En primer lugar, una fuente reserva espacio vertical para todos sus glifos, desde las mayúsculas altas hasta los trazos descendentes de letras como la g y la y. La cantidad de espacio reservado varía de un tipo de letra a otro, como señala la referencia de text-box-trim en MDN, por lo que un mismo font-size genera una caja de línea más alta o más baja según la fuente.

En segundo lugar, line-height añade interlineado. La especificación CSS 2.1 sobre interlineado y semiinterlineado define el interlineado como la diferencia entre el line-height y la suma del ascendente y el descendente de la fuente. La mitad se coloca encima de los glifos y la otra mitad debajo. Muchas fuentes tienen una suma de ascendente y descendente superior a 1.1em, así que con line-height: 1.1 el semiinterlineado suele ser pequeño o incluso negativo. En cualquier caso, el espacio vacío que dejan las propias métricas de la fuente encima de las mayúsculas y debajo de la línea base sigue ahí.

Cada tipo de letra reserva una cantidad distinta de espacio vertical, por lo que un margen negativo ajustado para una fuente es incorrecto para otra. Esto incluye la fuente de respaldo que se muestra antes de que cargue una fuente web, un problema que también provoca desplazamientos de diseño relacionados con las fuentes. Si reproduces una sesión en la que la fuente web llega tarde, puedes ver el fotograma en el que la fuente se intercambia y el encabezado con el margen “mágico” salta.

¿Cómo se corrige el hueco con text-box-trim?

text-box-trim elige qué bordes de un bloque de texto se recortan, y text-box-edge elige la línea hasta la que se recorta cada borde. text-box-trim acepta cuatro palabras clave:

• none: el valor inicial. No se recorta nada.
• trim-start: recorta el borde superior (over).
• trim-end: recorta el borde inferior (under).
• trim-both: recorta ambos bordes.

Este es el mismo encabezado, con el truco del margen sustituido:

h1 {
  line-height: 1.1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

Con text-box-trim aplicado, el borde superior de la caja queda ahora a la altura de la parte superior de las mayúsculas y el borde inferior descansa sobre la línea base. El espacio extra desaparece con cualquier fuente, porque el navegador lee las posiciones de la propia fuente y no de tu estimación.

La propiedad abreviada text-box combina ambas propiedades en una sola declaración. Estas dos reglas son equivalentes:

h1 {
  text-box: trim-both cap alphabetic;
}

/* Same result: an omitted trim keyword means trim-both */
h1 {
  text-box: cap alphabetic;
}

¿Qué valores de text-box-edge importan?

Para texto horizontal, dos pares de bordes cubren casi todos los casos: cap alphabetic y ex alphabetic. text-box-edge recibe dos palabras clave: la primera define el borde superior y la segunda, el borde inferior.

cap alphabetic coincide con la forma en que los diseñadores suelen medir el espacio alrededor de un encabezado o una etiqueta: desde la altura de las mayúsculas hasta la línea base. Usa ex alphabetic cuando el texto esté mayoritariamente en minúsculas y la altura de la x sea el límite superior visual:

.lowercase-label {
  text-box: trim-both ex alphabetic;
}

Hay tres reglas que suelen confundir a la mayoría:

• text-box-edge no tiene efecto por sí sola. No se recorta nada a menos que text-box-trim tenga un valor distinto de none.
• En la propiedad abreviada text-box, omitir la palabra clave de recorte equivale a trim-both, y omitir el borde equivale a auto. La palabra clave normal equivale a none auto.
• Ni text-box-trim ni text-box-edge se heredan. Establecerlas en body no recorta los encabezados ni los botones que contiene. Decláralas en cada elemento o en los estilos base de cada componente.

Centrar la etiqueta de un botón con text-box

Un botón con el mismo padding arriba y abajo a menudo muestra su etiqueta descentrada. El padding es igual, pero el espacio interno de la fuente encima de las mayúsculas y debajo de la línea base no lo es, y esa diferencia se percibe como padding extra en uno de los lados.

.button {
  padding: 0.75rem 1.25rem;
}

Recortar la caja de la etiqueta hasta la altura de las mayúsculas y la línea base hace que el padding sea el único espacio entre el texto y el borde del botón:

.button--trimmed {
  padding: 0.75rem 1.25rem;
  text-box: trim-both cap alphabetic;
}

Con una etiqueta como “Submit”, el espacio encima de las mayúsculas se ve ahora igual que el espacio debajo de la línea base. La especificación CSS Inline Layout permite aplicar text-box-trim a contenedores de bloque, contenedores multicolumna y cajas en línea, pero los navegadores difieren. Según el anuncio de intención de lanzamiento (intent to ship) de Mozilla, Firefox y Safari recortan las cajas en línea y Chromium no. El recorte tampoco tiene efecto en un contenedor flex o grid, así que asigna al botón display: inline-block o aplica el recorte a un elemento de etiqueta dentro de él. Como el borde inferior se recorta hasta la línea base, los trazos descendentes de letras como la g, la p y la y se extienden hacia el padding. Es el resultado tipográfico esperado, no un error.

Compatibilidad con navegadores y alternativa

MDN marca text-box como Baseline 2026, recientemente disponible desde agosto de 2026, e indica que puede no funcionar en dispositivos o navegadores antiguos. Los navegadores que no la admiten ignoran la declaración y renderizan el texto con el espaciado normal de la fuente. La alternativa es el diseño sin recortar: no está roto, simplemente es menos preciso. Si un diseño depende de los antiguos márgenes compensatorios, consérvalos solo para esos navegadores mediante una consulta de características @supports:

h1 {
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  h1 {
    /* Old per-font patch, kept only where text-box is unsupported */
    margin-block: -0.2em -0.15em;
  }
}

Conclusión

El hueco alrededor del texto se debe a las métricas de la fuente más el semiinterlineado. Un margen negativo solo lo oculta, y únicamente para un tipo de letra. Sustituye esos márgenes por text-box: trim-both cap alphabetic en cada componente de encabezado y etiqueta, traslada los márgenes heredados detrás de @supports not y comprueba el resultado tanto con tu fuente de respaldo como con tu fuente web.

Preguntas frecuentes

¿text-box-trim cambia el espaciado entre líneas en un párrafo de varias líneas?

No. En un contenedor de bloque, text-box-trim solo afecta a la parte superior de la primera línea y a la parte inferior de la última. El semiinterlineado entre las líneas ajustadas se mantiene intacto, de modo que line-height sigue controlando el espaciado dentro del párrafo. Solo los bordes exteriores del bloque se desplazan hacia la altura de las mayúsculas y la línea base.

¿Por qué no basta con establecer line-height: 1 para eliminar el espacio extra?

Establecer line-height: 1 solo modifica el interlineado. El espacio que la propia fuente reserva encima de las mayúsculas y debajo de la línea base permanece, así que los bordes de la caja siguen sin alinearse con la altura de las mayúsculas ni con la línea base. Además, reduce el espaciado entre las líneas ajustadas. text-box-trim recorta únicamente los bordes exteriores según las métricas de la fuente y deja que line-height siga controlando la legibilidad.

¿Recortar con text-box afecta al diseño de los elementos circundantes?

Sí. text-box-trim desplaza los bordes de contenido del elemento hasta las métricas elegidas, por lo que el elemento ocupa menos espacio en el eje de bloque. Los márgenes, los espacios (gaps) de flex y grid y los elementos vecinos se miden entonces desde el borde recortado, no desde el espacio reservado por la fuente. Por eso los tokens de espaciado se vuelven visualmente precisos una vez aplicado el recorte, y por eso es importante eliminar los antiguos márgenes negativos.

¿Cómo detecto la compatibilidad con text-box en JavaScript?

Llama a CSS.supports('text-box', 'trim-both cap alphabetic'). Devuelve true en los navegadores que aceptan esa declaración y false en los que no. Ejecuta la misma comprobación que la regla @supports de CSS, así que puedes usarla para decidir en tiempo de ejecución si aplicar márgenes compensatorios o para registrar qué ruta de renderizado recibe cada usuario.