Como corrigir o espaço extra acima e abaixo do texto em CSS

O espaço extra acima e abaixo do texto tem duas origens: as métricas verticais embutidas na fonte e a meia entrelinha (half-leading) que o line-height adiciona (ou remove) em cada lado da linha. A solução nativa em CSS é text-box: trim-both cap alphabetic.

Você definiu line-height: 1.1, removeu todas as margens, e o título continua dentro de uma caixa mais alta que as próprias letras. Então você adicionou uma margem negativa, ajustou até parecer certo e seguiu em frente. Até que a fonte da marca mudou.

Este artigo explica de onde vem esse espaço, por que margens negativas não conseguem removê-lo de forma confiável e como text-box-trim, text-box-edge e a propriedade abreviada text-box o eliminam em títulos e botões. No final, há um fallback para navegadores mais antigos.

O sintoma: um espaço que o padding não explica

Um título com padding zero, margem zero e line-height reduzido ainda exibe espaço vazio acima das maiúsculas e abaixo da linha de base. O DevTools mostra que a caixa de conteúdo é mais alta que as letras visíveis, e nada na sua folha de estilos justifica essa diferença.

O remendo habitual é uma margem negativa encontrada por tentativa e erro:

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

Esses valores são apenas ilustrativos. Eles não derivam de nada, e é justamente esse o problema.

Por que existe espaço extra acima e abaixo do texto?

O espaço extra acima e abaixo do texto tem duas causas, as métricas da fonte e a meia entrelinha, e ambas pertencem ao texto, não ao modelo de caixa.

Primeiro, a fonte reserva uma área vertical para todos os seus glifos, desde as maiúsculas altas até as hastes descendentes de letras como g e y. A quantidade de espaço reservada varia de uma família tipográfica para outra, como observa a referência do MDN sobre text-box-trim, de modo que o mesmo font-size produz uma caixa de linha mais alta ou mais baixa dependendo da fonte.

Segundo, o line-height adiciona entrelinha (leading). A especificação CSS 2.1 sobre leading e half-leading define a entrelinha como a diferença entre o line-height e a soma do ascendente (ascent) com o descendente (descent) da fonte. Metade dela fica acima dos glifos e metade abaixo. Muitas fontes têm ascendente mais descendente maior que 1.1em, então, com line-height: 1.1, a meia entrelinha costuma ser pequena ou até negativa. De qualquer forma, o espaço vazio que as próprias métricas da fonte deixam acima das maiúsculas e abaixo da linha de base continua lá.

Cada família tipográfica reserva uma quantidade diferente de espaço vertical, por isso uma margem negativa ajustada para uma fonte fica errada para outra. Isso inclui a fonte de fallback exibida antes de a web font carregar, um problema que também provoca deslocamento de layout relacionado a fontes. Se você reproduzir uma sessão em que a web font chega atrasada, é possível ver o quadro em que a fonte é trocada e o título com a “margem mágica” dá um salto.

Como corrigir o espaço com text-box-trim?

text-box-trim define quais bordas de um bloco de texto serão aparadas, e text-box-edge define até qual linha cada borda é aparada. text-box-trim aceita quatro palavras-chave:

• none: o valor inicial. Nada é aparado.
• trim-start: apara a borda superior (over).
• trim-end: apara a borda inferior (under).
• trim-both: apara ambas as bordas.

Veja o mesmo título, agora com o hack de margem substituído:

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

Com text-box-trim aplicado, a borda superior da caixa passa a ficar no topo das maiúsculas e a borda inferior fica sobre a linha de base. O espaço extra desaparece com qualquer fonte, porque o navegador lê as posições a partir da própria fonte, e não do seu palpite.

A propriedade abreviada text-box combina as duas propriedades em uma única declaração. As duas regras abaixo são equivalentes:

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

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

Quais valores de text-box-edge importam?

Para texto horizontal, dois pares de bordas cobrem quase todos os casos: cap alphabetic e ex alphabetic. text-box-edge recebe duas palavras-chave: a primeira define a borda superior e a segunda, a borda inferior.

cap alphabetic corresponde à forma como designers costumam medir o espaço ao redor de um título ou rótulo: da altura das maiúsculas (cap height) até a linha de base. Use ex alphabetic quando o texto for majoritariamente em minúsculas e a altura-x for o topo visual:

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

Três regras costumam pegar as pessoas desprevenidas:

• text-box-edge não tem efeito sozinho. Nada é aparado, a menos que text-box-trim esteja definido com um valor diferente de none.
• Na propriedade abreviada text-box, omitir a palavra-chave de aparo equivale a trim-both, e omitir a borda equivale a auto. A palavra-chave normal equivale a none auto.
• Nem text-box-trim nem text-box-edge são herdados. Defini-los no body não apara os títulos ou botões dentro dele. Declare-os em cada elemento ou nos estilos base de cada componente.

Centralizando o rótulo de um botão com text-box

Um botão com padding superior e inferior iguais frequentemente exibe o rótulo descentralizado. O padding é igual, mas o espaço interno da fonte acima das maiúsculas e abaixo da linha de base não é, e essa diferença aparece como padding extra de um dos lados.

.button {
  padding: 0.75rem 1.25rem;
}

Aparar a caixa do rótulo até a altura das maiúsculas e a linha de base faz com que o padding seja o único espaço entre o texto e a borda do botão:

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

Com um rótulo como “Enviar”, o espaço acima das maiúsculas agora parece igual ao espaço abaixo da linha de base. A especificação CSS Inline Layout permite que text-box-trim seja aplicado a contêineres de bloco, contêineres multicoluna e caixas inline, mas os navegadores divergem. Segundo o intent to ship da Mozilla, o Firefox e o Safari aparam caixas inline, e o Chromium não. O aparo também não tem efeito em contêineres flex ou grid; portanto, aplique display: inline-block ao botão ou coloque o aparo em um elemento de rótulo dentro dele. Como a borda inferior é aparada até a linha de base, as descendentes de letras como g, p e y avançam sobre o padding. Esse é o resultado tipográfico esperado, não um bug.

Suporte dos navegadores e fallback

O MDN classifica text-box como Baseline 2026, disponível recentemente desde agosto de 2026, e observa que a propriedade pode não funcionar em dispositivos ou navegadores mais antigos. Navegadores sem suporte ignoram a declaração e renderizam o texto com o espaçamento normal da fonte. O fallback é o layout sem aparo: não quebrado, apenas menos preciso. Se o design depende das antigas margens compensatórias, mantenha-as apenas para esses navegadores com uma feature query @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;
  }
}

Conclusão

O espaço ao redor do texto é a soma das métricas da fonte com a meia entrelinha. Uma margem negativa apenas o esconde, e somente para uma família tipográfica. Substitua essas margens por text-box: trim-both cap alphabetic em cada componente de título e rótulo, mova as margens legadas para dentro de um @supports not e verifique o resultado tanto com a fonte de fallback quanto com a web font.

Perguntas frequentes

O text-box-trim altera o espaçamento entre as linhas de um parágrafo com várias linhas?

Não. Em um contêiner de bloco, o text-box-trim afeta apenas o topo da primeira linha e a base da última. A meia entrelinha entre as linhas quebradas permanece como está, então o line-height continua controlando o espaçamento dentro do parágrafo. Apenas as bordas externas do bloco se deslocam até a altura das maiúsculas e a linha de base.

Por que não simplesmente definir line-height: 1 para remover o espaço extra?

Definir line-height: 1 altera apenas a entrelinha. O espaço que a própria fonte reserva acima das maiúsculas e abaixo da linha de base permanece, de modo que as bordas da caixa continuam não se alinhando com a altura das maiúsculas nem com a linha de base. Além disso, isso reduz o espaçamento entre as linhas quebradas. O text-box-trim apara apenas as bordas externas com base nas métricas da fonte e deixa o line-height livre para controlar a legibilidade.

Aparar com text-box afeta o layout dos elementos ao redor?

Sim. O text-box-trim desloca as bordas de conteúdo do elemento para as métricas escolhidas, então o elemento passa a ocupar menos espaço no eixo de bloco. Margens, gaps de flex e grid e elementos vizinhos passam a ser medidos a partir da borda aparada, e não do espaço reservado pela fonte. É por isso que os tokens de espaçamento se tornam visualmente precisos quando o aparo é aplicado, e por isso é importante remover as antigas margens negativas.

Como detectar o suporte a text-box em JavaScript?

Chame CSS.supports('text-box', 'trim-both cap alphabetic'). O método retorna true nos navegadores que aceitam essa declaração e false nos que não aceitam. Ele executa o mesmo teste da regra @supports do CSS, então você pode usá-lo para decidir em tempo de execução se deve aplicar margens compensatórias ou para registrar qual caminho de renderização cada usuário recebe.