SVG - 为什么我的SVG周围有边距，即使我没有设置边距？

Question

这是一个jsfiddle，演示了我在说什么：

http://jsfiddle.net/jononomo/yG45J/7/

<div class='div-for-svg'>
    <svg id='blue-border-svg'></svg>
    <svg id='green-border-svg'></svg>    
</div>

.div-for-svg {
    margin: 10px;
    padding: 10px;
    border: 2px dotted red;
    height: 200px;
    width: 200px;
    background-color: yellow;
}

#blue-border-svg {
    border: 2px solid blue;
    margin: 0px;
    padding: 0px;
}

#green-border-svg {
    border: 2px solid green;
    margin: 0px;
    padding: 0px;
}

我希望两个SVG元素在彼此之上和之下，它们之间没有空白区域。就目前而言，顶部SVG元素的底部蓝色边框下方和底部SVG元素的顶部绿色边框上方有明显的空间。我怎样才能摆脱这个空间，为什么它首先出现在那里？另外，SVG元素是否具有默认的高度和宽度？

Answer 1

默认情况下，您的svg元素具有display:inline，因此它们的行为与任何其他内联元素相同 - 正常图像也是相同的：相同长度的可能文本内容的空间“线”是保留的。 （对于img这个问题已经讨论了很多次......）

使用vertical-align:top（http://jsfiddle.net/yG45J/9/）或display:block（http://jsfiddle.net/yG45J/10/）解决了这个问题。