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
source

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

— Daniel

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
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
source

4

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

— Ângelo Lucas
source

3

Modifiez la displaypropriété du svg en block.

— Malachie
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
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
source

0

Changez votre style en

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

— jcdsvg
source