web-dev-qa-db-fra.com

Marge parasite sur l'élément svg

J'ai un document très simple (voir aussi JSFiddle ):

<style>
html, body, svg, div {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>
<body>
<svg id="foo"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   style="width: 768px; height: 1004px;">
</svg>
</body>

Pour une raison quelconque, l'élément svg obtient une marge inférieure de 3px ou 4px (c'est-à-dire que l'élément body obtient une hauteur de 1007px, 1008px ou même 1009px; la marge svg lui-même vaut 0 lorsqu'il est inspecté à l'aide des outils de débogage du navigateur.)

Si je remplace le svg par un div, la marge parasite disparaît. Le comportement est cohérent à travers Opera 12, Chrome 33, Firefox 26 et Internet Explorer 11, donc je suis convaincu que le comportement est conforme à la conception et aux normes) , Je ne comprends tout simplement pas .

htmlsvgmargin
29
Søren Løvborg

Il s'agit d'un problème courant avec les éléments inline. Pour résoudre ce problème, ajoutez simplement vertical-align:top.

EXEMPLE MIS À JOUR ICI 

#foo {
    background: #fff;
    vertical-align:top;
}

Il convient de noter que la valeur par défaut de vertical-align la propriété est baseline. Cela explique le comportement par défaut. Des valeurs telles que top, middle et bottom corrigeront l'alignement.

Alternativement, vous pouvez rendre l'élément block level. (exemple)

31
Josh Crozier

J'ai eu un problème connexe où j'avais un div contenant un SVG:

<div id=contents>
    <svg exported from illustrator>
</div>

et il y avait des marges géantes au-dessus et en dessous du SVG dans le DIV, même avec vertical-align: top dans le DIV et display: block dans le SVG.

J'avais réglé "largeur: 100%" pour les SVG pour qu'ils remplissent la page.

La solution consistait à définir "hauteur: 100%" pour les SVG. Ils affichaient déjà à la bonne hauteur, mais en ajoutant cela, on s'est débarrassé des marges étranges.

J'aimerais savoir comment et pourquoi cela a fonctionné.

5
Andrew Swift