svg 元素上的虚假边距答案

【问题标题】：Spurious margin on svg elementsvg 元素上的虚假边距
【发布时间】：2014-04-15 17:56:37
【问题描述】：

我有一个非常简单的文档（另见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 中是一致的，因此我确信该行为是设计和标准兼容的，我只是不明白。 p>

【问题讨论】：

标签： html svg margin

【解决方案1】：

我有一个包含 SVG 的 div 的相关问题：

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

并且在 DIV 中的 SVG 上方和下方都有巨大的边距，即使在 DIV 中使用 vertical-align:top 和在 SVG 中使用 display:block。

我为 SVG 设置了“width:100%”，以使它们填满页面。

解决方案是为 SVG 设置 "height:100%"。它们已经显示在正确的高度，但添加它消除了奇怪的边距。

我很想知道它是如何以及为什么起作用的。

【讨论】：

【解决方案2】：

我的文档有一个随窗口调整大小的 svg 元素。我使用 CSS overflow:hidden 来防止出现滚动条。即：

    body {
        overflow: hidden;
    }

【讨论】：

【解决方案3】：

这是inline 元素的常见问题。要解决这个问题，只需添加vertical-align:top。

UPDATED EXAMPLE HERE

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

值得注意的是vertical-align 属性的默认值为baseline。这解释了默认行为。 top、middle 和 bottom 等值将更正对齐方式。

或者，您可以使元素block 级别。 (example)

【讨论】：

啊，我真傻！我一直认为svg 是一个块元素。（我猜是那些日子……）我想我会选择display: block。
“谢谢！我也是！” - 当检查器框模型在任何地方都没有显示任何填充或边距时，为什么会有一条细边距线，这让我困惑了几分钟，这就是问题！
我刚刚添加了svg { vertical-align: top }。惊讶的引导程序不会这样做。额外的利润完全无法解释！！！
我在middle 遇到了这种问题。 top 去掉了大部分多余的间距。
非常感谢。这太令人沮丧了，因为任何地方都没有填充或边距。