Html svg元素上的伪边距

我有一个非常简单的文档（另请参见）：

html、正文、svg、div{
保证金：0；
填充：0；
边界：0；
}

由于某种原因，

svg

元素的底部边距为3px或4px（即

body

元素的高度为1007px、1008px甚至1009px；

svg

边距本身在使用浏览器调试工具检查时为0。）

---

如果我将

svg

替换为

div

，伪边距就会消失。Opera 12、Chrome 33、Firefox 26和Internet Explorer 11的行为都是一致的，因此我确信该行为符合设计和标准，我就是不明白。

这是

内联

元素的常见问题。要解决此问题，只需添加

垂直对齐：top

值得注意的是，

垂直对齐

属性的默认值是

基线

。这解释了默认行为。诸如

top

、

middle

和

bottom

等值将更正对齐

---

或者，您可以使元素

块
级别
 我的文档只有一个svg元素，可以随窗口调整大小。我使用CSSoverflow:hidden来防止滚动条出现。
即：

我遇到了一个相关问题，其中我有一个包含SVG的div：

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



在DIV中，SVG上下都有巨大的边距，即使DIV中有垂直align:top，SVG中有display:block

我为SVG设置了“宽度：100%”，以使它们填满页面

解决方案是为SVG的设置“高度：100%”。它们已经显示在正确的高度上，但添加这一点消除了奇怪的边距

我很想知道这是如何以及为什么起作用的。
啊，我真傻！我一直认为
svg
是块元素。（有一天，我想…）我想我会选择
显示：block
“谢谢！还有，我也是！”-我困惑了几分钟，当inspector box模型显示任何地方都没有填充或空白时，为什么会有一条很细的边距线，这就是问题所在！我刚刚添加了
svg{vertical align:top}
。令人惊讶的是，bootstrap没有做到这一点。额外的利润是完全无法解释的！！！我在
中间有这样的问题
top
去掉了大部分额外的间距。
#foo {
    background: #fff;
    vertical-align:top;
}

    body {
        overflow: hidden;
    }

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