web-dev-qa-db-fra.com

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

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

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

http://jsfiddle.net/EXLSF/

Remarquez l'espace supplémentaire red à l'intérieur du div en dessous du bleu svg.

Vous avez déjà essayé de définir padding et margin des deux éléments sur 0, mais sans chance.

htmlcsssvg
66
Daniel

Vous avez besoin display: block; sur votre svg.

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

En effet, les éléments de bloc en ligne (comme <svg> et <img>) s'asseoir sur la ligne de base du texte. L'espace supplémentaire que vous voyez est l'espace restant pour accueillir les descendants des personnages (la queue sur "y", "g", etc.).

Vous pouvez aussi utiliser vertical-align:top si vous devez le conserver inline ou inline-block

127
Andy

svg est un élément inline. inline les éléments laissent un espace blanc.

Solution:

Ajouter display:block à svg, ou définissez la hauteur du div parent comme svg.

DÉMO ici.

9
Hiral

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

4
Ângelo Lucas

Modifiez la propriété display du svg pour qu'elle soit block.

3
Malachi

Essayez d'ajouter height:100px à div et 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>
1
danrodi

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>
1
Farshad

Changez votre style en

style = "background-color: red; line-height: 0;"

0
jcdsvg