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/)解决了这个问题.