相同的css svg内容url比svg标记高4倍？

你对此没有任何解释吗

*{
框大小：边框框；
保证金：0；
填充：0；
}
我{
显示：内联块；
}
i:以前{
内容：url（'data:image/svg+xml；utf8'）；
显示：内联块；
框大小：边框框；
保证金：0；
填充：0；
}

这是因为

标记的高度取决于字体的高度，而不是某些svg元素。例如，如果您设置

i{font-family:serif}

i的高度将为31px（在我的系统上，它可能与您的设置不同），如果您想为i设置一个固定高度，您需要设置它。

这确实是一个字体问题，您可以通过添加

行高：0

轻松解决，以避免设置固定高度：

*{
框大小：边框框；
保证金：0；
填充：0；
}
我{
显示：内联块；
线高：0；
}
i:以前{
内容：url（'data:image/svg+xml；utf8'）；
显示：内联块；
框大小：边框框；
保证金：0；
填充：0；
}

第一件事。。。您的

标记不应该包含SVG吗？不

SVG

标记是将其与

i

标记进行比较，只需按run键查看相邻的两个图标，然后检查每个图标的高度和宽度。哦，我现在明白了。我的错误。好的，谢谢，在

i

和

i:before

工作之前，将css宽度和高度设置为24，也许可以将答案中的代码片段复制到showcase结果中