SVG 默认以基线（baseline）对齐，导致父容器出现意外垂直偏移；通过统一设置 vertical-align: middle 可彻底解决该布局错位问题。
svg 默认以基线（baseline）对齐，导致父容器出现意外垂直偏移；通过统一设置 `vertical-align: middle` 可彻底解决该布局错位问题。
在 CSS 布局中，当
对比你提供的 HTML 示例：第一组两个空盒子对齐正常；第二组仅 .box1 包含 SVG，便出现明显错位；第三组仅 .box2 含 SVG，同样错位；第四组两者均有 SVG，则重新对齐。这印证了问题本质是对齐基准不一致，而非 margin、padding 或 box-sizing 引起。
✅ 正确解法是显式统一垂直对齐方式：
.box1, .box2 {
vertical-align: middle; /* 推荐：居中对齐最直观可靠 */
}
其他可选值包括 top、bottom、text-top、text-bottom，但 middle 在绝大多数场景下兼容性最佳、视觉最稳定。注意：vertical-align 仅对 inline、inline-block、table-cell 等元素生效，因此必须确保 .box1 和 .box2 保持 display: inline-block（当前已满足）。
⚠️ 补充注意事项：
- 不要依赖 font-size: 0 或 line-height: 0 来“消除”基线空间——这可能影响可访问性及后续文本内容；
- 避免仅给含 SVG 的盒子单独加 vertical-align，必须成对统一设置，否则仍会破坏行内流对齐；
- 若需更严格的尺寸控制，可额外为 SVG 设置 display: block 并 margin: 0 auto 居中，但此时需注意父容器高度是否仍由内容撑开。
总结：SVG 的“隐形偏移”并非 bug，而是 CSS 行内对齐规范的自然表现。理解 vertical-align 的作用机制，并主动声明对齐策略，是构建稳定、可预测 UI 布局的关键实践。
