# text-box-trim: controle do espaço acima e abaixo do texto

> Como text-box-trim e text-box-edge removem o espaço fantasma que a fonte cria acima e abaixo do texto, e resolvem centralização e alinhamento com padding igual.

URL: https://dpw.dev/css/text-box-trim/  
Publicado em: 2026-09-28  
Categoria: css  
Tags: tipografia, layout, interface  
Autor: Tárcio Zemel

Todo bloco de texto na web carrega um espaço invisível acima e abaixo das letras, que muda de tamanho conforme a fonte e nunca foi possível controlar. Com **text-box-trim** dá para aparar esse espaço e finalmente usar `padding: 10px` num botão sabendo que os quatro lados vão parecer iguais.

> Artigo baseado em [CSS text-box-trim](https://developer.chrome.com/blog/css-text-box-trim).

A partir do Chrome 133, `text-box` permite a desenvolvedores e designers ajustar o espaço acima e abaixo do texto. A propriedade já está disponível também no Edge 133, no Safari 18.2 e no Firefox 154.

**Forma estendida:**

```css
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;
```

**Forma abreviada:**

```css
text-box: trim-both cap alphabetic;
```

A propriedade permite controlar o espaço acima e abaixo do texto em elementos como `<h1>`, `<button>` e `<p>`. Cada fonte produz uma quantidade diferente desse espaço no eixo de bloco, e ele entra no tamanho final do elemento. Essa contribuição caótica não é fácil de medir e, até agora, era impossível de controlar.

A fonte sempre soube dessa medida. Agora o CSS também sabe.

<figure>
  <video autoplay loop muted playsinline controls width="950" height="534">
    <source src="/images/blog/text-box-trim/introducao.webm" type="video/webm" />
  </video>
  <figcaption><a href="https://codepen.io/web-dot-dev/pen/xbKjRxL" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.</figcaption>
</figure>

## Por que esse espaço existe

O espaço acima e abaixo de uma fonte existe por causa da forma como a web diagrama texto, chamada de meia-entrelinha (*half-leading*). O assunto está muito bem explicado no texto <a href="https://matthiasott.com/notes/the-thing-with-leading-in-css" target="_blank" rel="noopener noreferrer">The Thing With Leading In CSS</a>, de <a href="https://matthiasott.com/" target="_blank" rel="noopener noreferrer">Matthias Ott</a>.

Na composição manual, pedaços de chumbo separavam as linhas de texto. A web se inspirou nisso, mas divide o chumbo em duas partes e distribui uma acima e outra abaixo do conteúdo.

![Um título com uma barra rosa acima e outra abaixo do texto, demonstrando a meia-entrelinha](/images/blog/text-box-trim/meia-entrelinha.webp)

*Fonte: <a href="https://matthiasott.com/notes/the-thing-with-leading-in-css" target="_blank" rel="noopener noreferrer">The Thing With Leading In CSS</a>.*

Essa história importa porque `text-box` dá nome a cada uma das metades: `over` e `under`. E, além do nome, a capacidade de removê-las.

Também existe trabalho anterior sobre o tema. O artigo <a href="https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202" target="_blank" rel="noopener noreferrer">Leading-Trim: The Future Of Digital Typesetting</a>, de Ethan Wang, foi onde `leading-trim` (o nome que `text-box` tinha antes) apareceu pela primeira vez.

<figure>
  <video autoplay loop muted playsinline>
    <source src="/images/blog/text-box-trim/leading-trim-gutenberg.webm" type="video/webm" />
  </video>
  <figcaption>Um título com espaço sobrando acima e abaixo aparenta ser cortado com uma tesoura.</figcaption>
</figure>

Para muitos designers, a porta de entrada no assunto foi o <a href="https://help.figma.com/hc/en-us/articles/360039956634-Explore-text-properties#h_01H96FW9Z3W7J7Z2HEN8V17BZT" target="_blank" rel="noopener noreferrer">controle de "vertical trim" do Figma</a>. <a href="https://x.com/figma/status/1640750882613493760" target="_blank" rel="noopener noreferrer">Este post no X mostra onde a opção fica</a> e como ela ajuda em botões.

<figure>
  <video autoplay loop muted playsinline controls width="1000" height="1000">
    <source src="/images/blog/text-box-trim/figma-vertical-trim.webm" type="video/webm" />
  </video>
  <figcaption>Fonte: <a href="https://x.com/figma/status/1640750882613493760" target="_blank" rel="noopener noreferrer">Figma no X</a>.</figcaption>
</figure>

Não importa por qual caminho se chegou até aqui: esse controle tipográfico de nome modesto faz uma diferença grande.

## Sintaxe

Estas são as duas declarações de uma linha mais comuns no trabalho com `text-box`:

```css
h1 {
  /* apara os dois lados até as letras maiúsculas */
  text-box: trim-both cap alphabetic;

  /* apara os dois lados até a altura do "x" minúsculo */
  text-box: trim-both ex alphabetic;
}
```

Aparar os dois lados com `cap alphabetic` vai ser o uso mais frequente do recurso, e é o que aparece na maioria das demonstrações a seguir. O exemplo também mostra `ex alphabetic`, útil para equilíbrio óptico em situações específicas.

### Playground de sintaxe

Dá para <a href="https://codepen.io/web-dot-dev/pen/RNbyooE" target="_blank" rel="noopener noreferrer">explorar a sintaxe neste playground</a> e ver o resultado por meio de menus suspensos. É possível trocar a fonte, mudar os valores de aparo de cima e de baixo, e acompanhar tudo com rótulos e cores.

![Prévia da sintaxe com text-box: trim-both cap alphabetic destacada, ao lado de três menus suspensos para escolher os valores de aparo](/images/blog/text-box-trim/explorador-de-sintaxe.webp)

***Coisas para testar:**

- Inspecionar visualmente como `text-box-trim` se comporta em texto de uma linha e de várias linhas.
- Passar o mouse sobre uma variação para ver quais valores de aparo produzem aquele efeito.
- Trocar a fonte.
- Aparar apenas um dos lados da caixa de texto.
- Revisar a sintaxe enquanto brinca com os controles.

<figure>
  <video autoplay loop muted playsinline controls width="1000" height="562">
    <source src="/images/blog/text-box-trim/explorador-de-sintaxe.webm" type="video/webm" />
  </video>
  <figcaption><a href="https://codepen.io/web-dot-dev/pen/RNbyooE" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.</figcaption>
</figure>

## O que dá para construir e quais problemas isso resolve

Da capacidade de aparar surgem soluções bem mais simples de centralização e alinhamento. Também é possível chegar mais perto de uma entrelinha de verdade, em que algo como `gap` passa a ser suficiente para separar os conteúdos.

<Image src="/images/blog/text-box-trim/entrelinha-aparada.webp" alt="Comparação entre dois grupos de conteúdo: o primeiro com meia-entrelinha, o segundo com a entrelinha aparada">
  O segundo grupo fica mais compacto. <a href="https://codepen.io/web-dot-dev/pen/RNbyoKE" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.*

### Centralização mais fácil

Em componentes menores, mais inline e dimensionados pelo próprio conteúdo, `padding: 10px` é um estilo razoável para dar espaçamento igual em todos os lados. Só que o resultado costuma confundir, porque quase sempre sobra espaço em cima e embaixo.

Para contornar isso, é comum declarar explicitamente menos padding no eixo de bloco, compensando o efeito da meia-entrelinha.

```css
button {
  padding-block: 5px;
  padding-inline: 10px;
}
```

Nesse ponto, resta testar combinações de valores até as coisas ficarem opticamente centralizadas. O que pode parecer bom em uma tela e um sistema operacional, e ruim em outros.

Com `text-box`, o espaço de meia-entrelinha é aparado do texto, e valores iguais de padding como `10px` voltam a ser úteis:

```css
button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
```

![Dois exemplos: o primeiro com padding de 10px e meia-entrelinha, o segundo com text-box: trim-both cap alphabetic aplicado](/images/blog/text-box-trim/centralizacao-botao.webp)

*O segundo botão fica opticamente centralizado. <a href="https://codepen.io/web-dot-dev/pen/NPKMbgq" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.*

Os exemplos a seguir usam uma fonte sans serif comum e uma fonte alternativa mais decorativa. Mostrar fontes diferentes ajuda a ilustrar o comportamento dinâmico de `text-box` entre famílias tipográficas.

Nestes elementos `<button>`, aparar o espaço faz `padding: 10px` parecer igual nos quatro lados de um elemento interativo real. A fonte alternativa, por sua vez, produz uma meia-entrelinha bem diferente.

![Três grupos de botões: o primeiro com fonte sans serif comum, o segundo com uma fonte decorativa e o terceiro com uma fonte manuscrita](/images/blog/text-box-trim/text-box-trim.webp)

*Cada fonte tem uma meia-entrelinha diferente, mas os valores de aparo são os mesmos e normalizam o espaço. <a href="https://codepen.io/web-dot-dev/pen/mybLOMg" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.*

Aqui estão elementos `<span>`, usados com frequência para exibir categorias ou badges. Outro caso em que padding igual deveria ser a melhor solução, mas que antes de `text-box` exigia contorno.

![Tags comparadas lado a lado: o primeiro grupo com meia-entrelinha, o segundo com a entrelinha aparada](/images/blog/text-box-trim/tags-badges.webp)

*O segundo grupo fica mais compacto e opticamente centralizado.*

### Alinhamento mais fácil

O espaço extra e incontrolável da meia-entrelinha acima (`over`) e abaixo (`under`) de uma caixa de texto também dificulta o alinhamento. Os exemplos a seguir mostram quando isso acontece e como aparar os lados de bloco produz alinhamentos melhores.

Neste caso, uma imagem é posicionada ao lado do texto e cresce até a altura que o texto exige. Sem `text-box`, a imagem sempre fica um pouco mais alta. Com `text-box`, ela alinha perfeitamente com o conteúdo de texto.

![Imagem ao lado de um bloco de texto, com e sem aparo da meia-entrelinha, mostrando o alinhamento das duas alturas](/images/blog/text-box-trim/alinhamento-imagem-texto.webp)

*<a href="https://codepen.io/web-dot-dev/pen/yyBjVpg" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.*

Em cenários com quebra de linha, o espaço em branco fica acima da primeira linha formatada e abaixo da última.

No exemplo seguinte, o recurso <a href="https://web.dev/learn/css/logical-properties" target="_blank" rel="noopener noreferrer">se adapta logicamente</a> a uma mudança de <a href="https://developer.mozilla.org/docs/Web/CSS/writing-mode" target="_blank" rel="noopener noreferrer">`writing-mode`</a>. Ao trocar o texto, o layout continua alinhado.

![Layout com writing-mode vertical mantendo o alinhamento do texto aparado](/images/blog/text-box-trim/writing-mode-vertical.webp)

*<a href="https://codepen.io/web-dot-dev/pen/dPbeOJQ" target="_blank" rel="noopener noreferrer">Veja no CodePen</a>.*

## Para continuar estudando

A lista abaixo reúne informações adicionais e mais casos de uso.

- <a href="https://codepen.io/collection/zxQBaL" target="_blank" rel="noopener noreferrer">Coleção no CodePen com todas as demonstrações</a>.
- <a href="https://github.com/jantimon/text-box-trim-examples" target="_blank" rel="noopener noreferrer">Pesquisa e demonstrações</a> de Jan Nicklas.
- <a href="https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/" target="_blank" rel="noopener noreferrer">Two CSS Properties for Trimming Text Box Whitespace</a>, no CSS-Tricks.
- <a href="https://drafts.csswg.org/css-inline-3/#text-edges" target="_blank" rel="noopener noreferrer">CSS Inline Layout on text edges</a>, na especificação.
- Não confundir com <a href="https://web.dev/articles/css-size-adjust" target="_blank" rel="noopener noreferrer">`size-adjust` ou `ascent-override`</a>.
- <a href="https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/" target="_blank" rel="noopener noreferrer">CSS Baseline: The Good, The Bad And The Ugly</a>.
- Aplicado a vários elementos HTML: <a href="https://codepen.io/nileshprajapati/pen/RweKdmw" target="_blank" rel="noopener noreferrer">CodePen</a>.
- <a href="https://webkit.org/blog/16301/webkit-features-in-safari-18-2/" target="_blank" rel="noopener noreferrer">Post do Safari sobre o recurso</a>.
- <a href="https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/" target="_blank" rel="noopener noreferrer">Why I'm excited about text-box-trim as a designer</a>.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml