css - 相同的 css svg 内容 url 的高度比 svg 标签高 4px?
问题描述
对此没有任何解释?
* {
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 设置一个固定的高度,您需要设置它。
推荐阅读
- javascript - 在javascript中返回对象的属性
- azure - 通过VM的终端打开一个Azure VM的端口
- video - FFmpeg:将任何视频转换为边栏模糊的方形 1:1 视频
- sql - 检索与一组商品一起出售的所有订单
- ios - 获取 Cocoapods 自动设置正确的 swift 版本
- ios - 如何让 UIlabel 自动动态跨越多行。在具有多个 UIlabels 的 Tableview 单元格/ContentView 内
- git - 多个 Git(*) 存储库的集中式 CI
- node.js - 在其目录之外运行 NodeJS 应用程序
- python - 通过 PIL 将 Numpy 数组保存为实验室图像
- python - sqlalchemy.exc.ArgumentError:映射器映射类无法为映射表“用户”组装任何主键列