Css 尝试将SVG与HTML元素对齐时的间隙

我试图将几个SVG元素与一个范围对齐。Atom的HTML预览看起来不错，但在Chrome和Safari下，SVG和span之间有一个差距，我无法解释

*{
填充：0；
保证金：0；
}
div.digitDiv{
字体大小：10vw；
字体系列：monospace；
显示：内联块；
宽度：1米；
左边距：2米；
边框：1px纯红；
文本对齐：居中；
}
span.位{
边框：1px纯绿色；
}
svg{
边框：1px纯蓝色；
宽度：5vw；
填写：#000；
}

SVG，为什么不对齐？
1.
2.
3.
1.

有一个与您的问题非常相似的问题，答案也适用于您

---

正如链接答案中所说，“SVG是内联的，在一个表格单元格内”，因此您需要在CSS中为

SVG

添加

display:block

语句，并手动固定水平位置。

您可以尝试在.digitDiv内浮动元素

span.digit {
    border:1px solid green;
    float:left

}

svg {
    border:1px solid blue;
    width: 5vw;
    fill: #000;
    float:left
}

---

欢迎来到堆栈溢出！寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。请参阅OP，只需在

.digitDiv

中使
svg
和
span
显示：block

。