> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Remova o espaço abaixo do SVG inline com layout CSS

> Descubra se o espaço abaixo do SVG pertence à linha HTML ou à arte. Escolha exibição em bloco ou alinhamento inline e verifique o resultado na página.

Source: https://perfectvector.com/pt-BR/blog/inline-svg-baseline-gap

Language: pt-BR
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

Uma pequena faixa abaixo de um SVG pode vir da linha HTML que o contém. Um gráfico inline participa do layout de texto, no qual a linha de base e a altura de linha podem deixar espaço abaixo da caixa. Para uma imagem isolada, teste `display: block`. Para um gráfico que precisa ficar ao lado de texto, escolha deliberadamente seu alinhamento inline.

Primeiro localize o espaço. Uma área **fora da caixa do elemento SVG** exige verificar o layout da página. Uma área **dentro dessa caixa** pode pertencer à tela do SVG ou às regras de ajuste. Vetorizar o logo novamente não corrige o primeiro problema. Este guia ajuda a distinguir os dois e verificar uma correção pequena e local de CSS.

## Descubra qual caixa contém o espaço

Nas ferramentas de desenvolvedor, dê fundos contrastantes ao SVG e ao contêiner imediato. Inspecione também os contornos dos elementos. O fundo é uma ajuda temporária de diagnóstico; não precisa fazer parte da arte entregue.

```css
.logo-wrap {
  background: peachpuff;
}

.logo-wrap > svg {
  background: lightgreen;
}
```

Se a cor pêssego continua abaixo da caixa verde do SVG, inspecione layout de linha, padding, borda, altura e vizinhos do contêiner. Se o verde continua abaixo do desenho visível, inspecione o `viewBox`, os limites pintados e o ajuste da arte ao viewport.

Os dois podem acontecer juntos. Corrigir a linha pode remover uma faixa fina e deixar uma margem transparente maior dentro da imagem. O [guia de ajuste SVG](https://perfectvector.com/pt-BR/blog/svg-preserveaspectratio) explica como retângulo de origem e viewport de destino interagem. Não aperte o `viewBox` sem saber se o espaço indesejado está dentro dele.

O método de incorporação também importa. Um `<svg>` inline pertence ao documento HTML; um `<img src="logo.svg">` carrega uma imagem externa. Seus limites de estilo diferem, como explica o [guia de SVG inline versus imagem](https://perfectvector.com/pt-BR/blog/inline-svg-vs-img). Inspecione o elemento realmente colocado na linha HTML em vez de presumir que todo SVG é incorporado da mesma forma.

## Por que a linha de base pode deixar espaço abaixo

Linhas de texto precisam de espaço para letras que descem abaixo da linha de base, como `g` e `p`. Um gráfico inline pode se alinhar à linha de base enquanto a linha que o contém ainda se estende abaixo. Por isso, zerar a margem da imagem pode não mudar nada.

[As regras CSS de cálculo de altura de linha](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) determinam a caixa de linha pelas caixas participantes e seu alinhamento. Fonte e altura de linha do pai contribuem mesmo quando o conteúdo visível é um gráfico. A faixa exata resulta, portanto, dos estilos ao redor, não de uma margem fixa do SVG.

Não confunda essa linha de base com a de letras desenhadas *dentro* do SVG. Alterar `dominant-baseline` em um texto SVG trata dessa escrita interna. Não escolhe como o gráfico inteiro se posiciona na linha HTML.

### Um exemplo medido sem tela SVG vazia

Criamos uma página HTML original com três cópias do mesmo SVG. Cada SVG tem `viewBox` de `240 × 100` preenchido de ponta a ponta por um retângulo e é renderizado em `240 × 100` pixels CSS. As linhas usam Arial a `40px` com altura de linha de `48px`. Só muda a exibição ou o alinhamento do SVG.

O navegador retornou estas medidas:

| Tratamento do SVG                | Altura do SVG | Altura da linha | Espaço abaixo da caixa SVG |
| -------------------------------- | ------------- | --------------- | -------------------------- |
| Inline, alinhado à linha de base | 100px         | 110,5px         | 10,5px                     |
| Exibição em bloco                | 100px         | 100px           | 0px                        |
| Inline, alinhado por baixo       | 100px         | 100px           | 0px                        |

![Comparação no navegador do mesmo SVG sólido, com uma faixa de 10,5 pixels abaixo da versão inline na linha de base e nenhuma faixa nas versões em bloco e alinhada por baixo](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*O retângulo pintado preenche cada SVG. A faixa pêssego abaixo da primeira caixa verde pertence à linha HTML, não a espaço extra no viewBox.*

São medidas desta página em um navegador, não promessa de um espaço de 10,5px em todo layout. Comparamos a coordenada inferior do contêiner com a do SVG. A altura do SVG continuou em 100px nos três casos; a correção não reduziu nem recortou o desenho.

## Use exibição em bloco para um gráfico isolado

Quando o logo deve ocupar sua própria linha, aplique a regra de layout àquela imagem específica:

```css
.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}
```

[A referência display da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) diferencia a participação em bloco e inline no layout de fluxo. Transformar o SVG em bloco remove sua função de item inline na linha de texto ao redor. Não edita caminhos nem remove margens transparentes da arte.

Confira o contêiner após aplicar a regra. Se ele ainda se estende abaixo da imagem, procure altura explícita, padding, outro filho, pseudo-elemento ou linha adicional. Uma quebra de linha ou nó de texto após um gráfico em bloco pode introduzir conteúdo próprio. Um ancestral também pode causar o espaço visível.

Mantenha o seletor restrito. Aplicar `svg { display: block; }` ao site inteiro pode mover ícones que pertencem a rótulos ou frases. Escolha o componente que precisa de um gráfico isolado e inspecione seus outros usos.

## Mantenha gráficos de linhas de texto inline e escolha o alinhamento

Para um ícone ou pequena marca junto de palavras, manter inline pode ser o layout pretendido. `vertical-align: bottom` alinha a borda inferior da caixa de margem à parte inferior da linha. `vertical-align: middle` usa a linha de base e a altura-x do pai; não é um comando para centralizar geometricamente toda imagem em todo contêiner. Veja as [definições de vertical-align da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align).

```css
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
```

Escolha entre esses valores inspecionando o rótulo e a fonte reais. Um ícone que toca a parte inferior da linha pode parecer baixo demais junto de maiúsculas. Uma marca alinhada com `middle` ainda pode precisar de ajuste óptico por ter a arte visível distribuída de forma irregular dentro da caixa.

O caso alinhado por baixo em nosso exemplo continha só o gráfico. Ele comprova que o alinhamento removeu a faixa naquela linha específica. Não estabelece que toda linha mista de texto e ícone terá a mesma altura ou aparência.

Evite `line-height: 0` em um contêiner de texto compartilhado como primeira correção. Isso altera texto e espaçamento da imagem. Pode esconder o sintoma imediato e deixar o componente dependente de ajustes posteriores quando alguém adicionar um rótulo. Escolha a exibição ou alinhamento pretendido antes de mudar a tipografia do pai.

## Verifique a correção sem alterar a arte

Faça uma alteração por vez e confira:

1. **Limite do elemento:** o espaço visível está agora dentro ou fora da caixa SVG?
2. **Dimensões:** o SVG manteve largura, altura e proporções pretendidas?
3. **Vizinhos:** rótulos, links e ícones continuam onde devem?
4. **Layout responsivo:** o componente funciona em tamanhos estreitos e largos?
5. **Estilos calculados:** a declaração pretendida vence ou uma regra mais específica a substitui?

Em um contêiner simples sem bordas ou padding, comparar sua coordenada inferior com a da imagem é útil. Em um componente real, considere padding intencional e outros conteúdos antes de chamar a diferença de erro.

Se a página precisa de outra disposição em telas menores, confira-a também. Uma correção adequada para um logo isolado pode não servir a uma linha de navegação com texto que quebra. Remova os fundos temporários quando o limite estiver claro.

## Quando a vetorização ajuda neste fluxo

Um SVG existente e editável geralmente precisa aqui de uma correção de CSS ou de tela. Mantenha o arquivo e diagnostique seu posicionamento antes de reconstruí-lo.

Se a marca só existe como PNG ou JPG e precisa de contornos editáveis, [use o PerfectVector para converter a imagem em arte vetorial](https://perfectvector.com/pt-BR/image-to-vector), inspecione contorno, aberturas e tela de origem e depois posicione o resultado. A [ficha de avaliação de qualidade da vetorização](https://perfectvector.com/pt-BR/blog/evaluate-vector-trace-quality) ajuda nessa verificação separada de geometria. A vetorização prepara formas; o CSS da página ainda controla a caixa de linha HTML.

## FAQ

**Por que margin: 0 não remove o espaço abaixo do SVG?**
O espaço pode pertencer à linha de texto que o contém, não às margens do SVG. Inspecione limites do SVG e do contêiner e teste bloco para imagem isolada ou alinhamento vertical adequado para gráfico inline.

**display: block recorta espaço vazio do SVG?**
Não. Ele muda a participação do elemento no layout HTML. O espaço vazio dentro do viewBox permanece e exige verificação separada de arte ou ajuste.

**Devo usar vertical-align: bottom ou middle?**
Use o valor adequado à linha real. Bottom alinha com sua parte inferior; middle usa a linha de base e altura-x do pai. Inspecione com a fonte final e o texto vizinho, sem tratar nenhum valor como centralização universal.

## Fontes

1. [W3C — Altura de linha e alinhamento vertical CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Como caixas participantes, alinhamento e tipografia do pai contribuem para a altura.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Diferença entre participação em bloco e inline no layout de fluxo.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Alinhamentos baseline, bottom e middle e as caixas às quais a propriedade se aplica.

***

Começando com uma marca disponível apenas em raster? [Prepare formas SVG editáveis](https://perfectvector.com/pt-BR/image-to-vector), compare seus contornos e tela com a origem e confira o posicionamento no componente real da página.

## Explore

- [Read the HTML article](https://perfectvector.com/pt-BR/blog/inline-svg-baseline-gap)
- [Evite saltos do logo SVG reservando espaço na página](https://perfectvector.com/pt-BR/blog/svg-logo-layout-reservation.md)
- [Logo SVG no modo escuro: escolha quem controla a cor](https://perfectvector.com/pt-BR/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)