如何避免SVG元素将页面其他内容推到顶部？

解决方案 #

你遇到的是行内元素默认基线对齐带来的底部间隙问题，可任选以下方案修复：

• 给svg设置块级属性，直接消除行内元素特性带来的间隙，无额外副作用

  svg {
    display: block;
  }
  

• 给svg的父容器.svg-container设置字号为0，消除字符行高带来的预留间隙

  .svg-container {
    font-size: 0;
  }
  

• 修改svg的垂直对齐规则，脱离默认基线对齐

  svg {
    vertical-align: bottom;
  }
  

• 给父容器设置行高为0

  .svg-container {
    line-height: 0;
  }
  

你之前用:before伪元素不生效的原因是伪元素默认也是行内/行内块级属性，没有修改对齐规则的情况下无法解决基线间隙问题，用上述方案即可快速修复。

内容的提问来源于stack exchange，提问作者Szarlotka