Question

我有一个非常简单的文件（另见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的行为是一致的，所以我确信这种行为符合设计和标准，我只是不明白。

Answer 1

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

UPDATED EXAMPLE HERE

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

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

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

Answer 2

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

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

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

我已设置＆＃34;宽度：100％＆＃34;让SVG让它们填满页面。

解决方案是设置＆＃34;身高：100％＆＃34;对于SVG的。它们已经显示在正确的高度，但添加它可以摆脱奇怪的边缘。

我很想知道这是如何以及为何有效。

Answer 3

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

    body {
        overflow: hidden;
    }

svg元素的虚假边际

3 个答案: