Comment se débarrasser de l'espace supplémentaire sous svg dans l'élément div

87

Voici une illustration du problème (testé sous Firefox et Chrome):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Développer l'extrait

Vue sur JSFiddle

Notez l' redespace supplémentaire à l'intérieur du divdessous du bleu svg.

Déjà essayé le réglage paddinget margindes deux éléments à 0, mais sans chance.

html css svg Daniel
la source
Semble être lié à un problème similaire avec les images, par exemple stackoverflow.com/questions/7774814/… .
Daniel

Réponses:

174

Vous avez besoin display: block;de votre svg.

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

Cela est dû au fait que les éléments de bloc en ligne (comme <svg>et <img>) se trouvent sur la ligne de base du texte. L'espace supplémentaire que vous voyez est l'espace laissé pour accueillir les descendants de caractères (la queue sur «y», «g», etc.).

Vous pouvez également l'utiliser vertical-align:topsi vous avez besoin de le conserver inlineouinline-block

Andy
la source
Incroyable. Alors, tous les éléments en ligne ajoutent-ils un espace blanc en bas?
clapas du
2
L'explication est que les inline-blockéléments (comme <svg>et <img>) reposent sur la ligne de base du texte. L'espace supplémentaire que vous voyez est l'espace laissé pour accueillir les descendants de caractères (la queue sur «y», «g», etc.).
Paul LeBeau
1
Je préféreraisvertical-align:top
John Xiao
J'étais convaincu que l'espace supplémentaire était quelque chose à voir avec line-height, mais le réglage line-height: 0sur le svg et / ou son conteneur ne faisait aucune différence. Seulement display: blockrésolu. C'est un tel piège si vous travaillez sur un gros SVG, car vous ne le penseriez jamais comme en ligne. Si vous avez une petite icône, cependant, cela a du sens.
devuxer le
display: blockn'a pas fonctionné pour moi, mais a vertical-alignfait
Jay
12

svgest un inlineélément. inlineles éléments laissent un espace blanc.

Solution:

Ajouter display:blockà svgou rendre la hauteur du div parent identique à svg.

DÉMO ici.

Hiral
la source
4

Une autre alternative est d' ajouter font-size: 0à svg parent.

Ângelo Lucas
la source
3

Modifiez la displaypropriété du svg en block.

Malachie
la source
1

Essayez d' ajouter height:100pxà divet en utilisant un height="100%"sur svg:

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
Danrodi
la source
4
Merci pour votre commentaire. Cela fonctionne très bien, mais devient délicat quand on ne connaît pas la hauteur de l' svgavance.
Daniel
1

ajoutez simplement la hauteur à l'élément div principal 

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

Changez votre style en

style = "couleur de fond: rouge; hauteur de ligne: 0;"

jcdsvg
la source