css - 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/ ) 可以解决这个问题。