svg被引用时莫名高度多了4px

木木芳草

已于 2024-01-09 16:53:08 修改

阅读量497

点赞数 1

分类专栏： css 文章标签： svg

于 2022-03-25 18:09:25 首次发布

本文链接：https://blog.csdn.net/weixin_44817180/article/details/123742267

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

解决办法：
法1.给svg的外标签加个display：flex
法2.给svg的外标签加height：svg的高度，display：flex

法3.在它的父级加上vertical-align: middle;，父级的父级：line-height: initial;
列如：

.container {
  width: 100%;
  line-height: initial;
  .brandIcon {
    display: inline-block;
    margin: 0 8px 0 0;
    vertical-align: middle;
  }
  .cardIcon {
    display: flex;
  }
}

<div className={styles.container}>
      {codes.map(code => {
        return <div className={styles.brandIcon}>{getIcon(code)}</div>;
      })}
    </div>