web-dev-qa-db-ja.com

svg要素の偽のマージン

私は非常に単純なドキュメントを持っています（ 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>

何らかの理由で、svg要素は3pxまたは4pxの下マージンを取得します（つまり、body要素は1007px、1008pxまたは1009pxの高さを取得します。svgマージンブラウザのデバッグツールを使用して検査した場合、それ自体は0です）。

svgをdivに置き換えると、偽のマージンが消えます。動作はOpera 12、Chrome 33、Firefox 26、およびInternet Explorer 11）で一貫しているので、動作は仕様および標準に準拠していると確信しています、私はそれを取得しません。

htmlsvgmargin
29
Søren Løvborg

これは、inline要素の一般的な問題です。これを解決するには、単にvertical-align:topを追加します。

ここに更新された例

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

vertical-alignプロパティのデフォルト値はbaselineであることに注意してください。これはデフォルトの動作を説明しています。 top、middle、bottomなどの値は、位置合わせを修正します。

または、要素をblockレベルにすることもできます。 （例）

31
Josh Crozier

SVGを含むdivに関連する問題がありました。

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

dIVのvertical-align：topとSVGのdisplay：blockを使用しても、DIVのSVGの上下に大きなマージンがありました。

SVGがページいっぱいになるように「width：100％」を設定しました。

解決策は、SVGに対して"height：100％"を設定することでした。それらはすでに正しい高さで表示されていましたが、これを追加すると奇妙なマージンが取り除かれました。

これがどのように、なぜ機能したかを知りたいです。

5
Andrew Swift