svg 元素上的虚假边距
Posted
技术标签:
【中文标题】svg 元素上的虚假边距【英文标题】：Spurious margin on svg element 【发布时间】：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>
【问题讨论】：
【参考方案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 去掉了大部分多余的间距。
非常感谢。这太令人沮丧了，因为任何地方都没有填充或边距。以上是关于svg 元素上的虚假边距的主要内容，如果未能解决你的问题，请参考以下文章