私は非常にシンプルな文書を持っています（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要素の下余白が 3 ピクセルまたは 4 ピクセルになります (つまり、body要素の高さは 1007 ピクセル、1008 ピクセル、または 1009 ピクセルになります。svgブラウザーのデバッグ ツールを使用して検査すると、余白自体は 0 になります)。
svgを に置き換えるとdiv、不必要な余白は消えます。この動作はOpera 12、Chrome 33、Firefox 26、Internet Explorer 11で一貫しているため、この動作は設計によるものであり、標準に準拠していると確信しています。理解できない。
ベストアンサー1
これは要素によくある問題ですinline。これを解決するには、 を追加するだけですvertical-align:top。
#foo {
background: #fff;
vertical-align:top;
}
プロパティのデフォルト値は でvertical-alignあることに注意してくださいbaseline。これはデフォルトの動作を説明しています。top、middle、などの値はbottom配置を修正します。
あるいは、要素をblockレベルにすることもできます。（例）