svg元素的虚假边际

这是inline元素的常见问题.要解决此问题,只需添加即可vertical-align:top.

这里有更新的例子

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

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

或者,您可以使元素block级别.(例)

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

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

在DIV中SVG上方和下方都有巨大的边距,即使是DIV中的vertical-align:top和SVG中的block:block.

我为SVG设置了"宽度:100%",使它们填满了页面.

解决方案是为SVG设置"高度:100%".他们已经显示在正确的高度,但添加它摆脱了奇怪的边缘.

我很想知道这是如何以及为什么有效.