Css SVG—为什么即使我'；我没有设定利润？

下面是一个JSFIDLE，它演示了我所说的内容：

.div用于svg{
利润率：10px；
填充：10px；
边框：2个点红色；
高度：200px；
宽度：200px；
背景颜色：黄色；
}
#蓝色边框svg{
边框：2件纯蓝；
边际：0px；
填充：0px；
}
#绿色边框svg{
边框：2倍纯绿；
边际：0px；
填充：0px；
}

我希望这两个SVG元素彼此上下，中间没有空格。现在，在顶部SVG元素的底部蓝色边框下方和底部SVG元素的顶部绿色边框上方都有空白。我怎样才能摆脱这个空间，为什么它会在那里？另外，SVG元素是否具有默认的高度和宽度？

---

默认情况下，您的

svg

元素具有

display:inline

，因此它们的行为与任何其他内联元素类似–对于普通图像，它们将是相同的：保留同一“行”上可能的文本内容长度不足的空间。（对于

img

这个问题已经讨论过很多次了……）

使用

vertical align:top

（）或

display:block

（）可以解决此问题

<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;
}