svg在行内元素中下移是因默认按基线对齐，底部预留降部空间；解法优先vertical-align: middle，次选flex布局，display: block仅适用于独占行场景。
为什么SVG在行内元素里总往下掉一截
因为<svg></svg>默认是inline元素，和文字一样按基线（baseline）对齐，而SVG的底部会空出一段留给字母“g”“y”这类降部字符——哪怕你没写字，浏览器也预留了。这不是bug，是CSS行内布局的正常行为。
- 现象：SVG下方总有几像素空白，
margin-bottom: -4px能压住但不通用 - 本质：父容器是
line-height驱动的行框，SVG作为替换元素参与基线对齐 - 最直接解法不是调
vertical-align，而是先让它脱离行内流
display: block真能解决所有场景吗
能清掉底部留白，但副作用明显：一旦设成block，SVG就不再和文字并排，也不响应vertical-align，更没法用text-align控制水平位置。
- 适用场景：
<svg></svg>单独占一行，或包裹在div里做卡片图标 - 不适用：
<span>状态<svg></svg>正常</span>这种行内混排 - 替代方案优先级建议：
vertical-align: middle>vertical-align: top>display: block - 注意：设
block后若父容器有text-align: center，SVG不会居中，得加margin: 0 auto
vertical-align有哪些值实际好用
vertical-align只对inline、inline-block、table-cell生效，SVG保持inline时这是首选。
-
vertical-align: middle：对齐到父元素x-height中点，多数情况最自然 -
vertical-align: top：对齐到行框顶部，适合和大号文字并排时避免上浮 -
vertical-align: -0.125em：微调用，比像素值更适配字体缩放 - 别用
vertical-align: baseline——它就是问题源头
Flex布局下还要管对齐吗
用display: flex包一层，SVG默认就居中对齐了，vertical-align完全失效，display: block也不再必要。
- 推荐写法：
<div style="display: flex; align-items: center"> <svg></svg><span>文字</span> </div> - 注意：如果父容器本身是
inline-flex，SVG仍可能受外层文本影响，建议统一用flex - 兼容性提醒：
flex在IE10+可用，但align-items: center在IE10需加-ms-前缀
真正麻烦的是嵌套场景：比如SVG在button里，按钮又在nav里，而nav用了display: table……这时候display: block只是掩耳盗铃，得一层层查父级的line-height和font-size。对齐问题从来不是SVG自己的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
