对此没有任何解释吗?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
i {
display: inline-block;
}
i:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" fill="black" stroke="black"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0;
}
<i></i>
<svg viewBox="0 0 24 24" width="24" fill="black" stroke="black">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
最佳答案
这是因为 <i>
的高度标签取决于字体的高度,而不取决于某些 svg 元素。例如,如果您设置 i {font-family: serif}
i 的高度将为 31px(在我的系统上,它可能与您的设置不同)如果您想要 i 的固定高度,您需要设置它。
关于css - 相同的 css svg 内容 url 的高度比 svg 标签高 4px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55947679/