Como se livrar do espaço extra abaixo do svg no elemento div

87

Aqui está uma ilustração do problema (testado no Firefox e Chrome):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Expandir snippet

Ver no JSFiddle

Observe o redespaço extra dentro do divabaixo do azul svg.

Já tentei configuração paddinge marginde ambos os elementos para 0, mas sem sorte.

html css svg

— Daniel
fonte

Parece estar relacionado a um problema semelhante com imagens, por exemplo, stackoverflow.com/questions/7774814/… .

— Daniel

174

Você precisa display: block;do seu svg.

<svg style="display: block;"></svg>

Isso ocorre porque os elementos do bloco embutido (como <svg>e <img>) ficam na linha de base do texto. O espaço extra que você está vendo é o espaço deixado para acomodar descendentes de caracteres (a cauda em 'y', 'g' etc).

Você também pode usar vertical-align:topse precisar mantê-lo inlineouinline-block

— Andy
fonte

Surpreendente. Então, todos os elementos embutidos adicionam espaço em branco na parte inferior?

— clapas de

2

A explicação é que os inline-blockelementos (como <svg>e <img>) ficam na linha de base do texto. O espaço extra que você está vendo é o espaço que resta para acomodar descendentes de caracteres (a cauda em 'y', 'g' etc).

— Paul LeBeau de

1

Eu prefeririavertical-align:top

— John Xiao

Eu estava convencido de que o espaço extra tinha algo a ver com isso line-height, mas definir line-height: 0o SVG e / ou seu contêiner não fez diferença. Apenas display: blockresolvido. Isso é um problema se você estiver trabalhando em um SVG grande porque nunca pensaria nele como embutido. Se você tiver um pequeno ícone, porém, faz sentido.

— devuxer

display: blocknão funcionou para mim, mas vertical-alignfuncionou

— Jay,

12

svgé um inlineelemento. inlineos elementos deixam o espaço em branco.

Solução:

Adicionar display:blockpara svg, ou fazer altura do pai Div mesma svg.

DEMO aqui.

— Hiral
fonte

4

Outra alternativa é adicionar font-size: 0a svg parent.

— Ângelo Lucas
fonte

3

Altere a displaypropriedade do svg para ser block.

— Malaquias
fonte

1

Tente adicionar height:100pxa dive usando um height="100%"on svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

— danrodi
fonte

4

Obrigado por seu comentário. Isso funciona bem, mas se torna complicado quando não se sabe a altura do svgavanço.

— Daniel

1

simplesmente adicione a altura ao elemento div principal

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

— Farshad
fonte

0

Mude seu estilo para

estilo = "cor de fundo: vermelho; altura da linha: 0;"

— jcdsvg
fonte