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

Respostas:

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