SVG 默认以基线（baseline）方式对齐，导致父容器出现意外位移；通过统一设置 vertical-align: middle 可消除该偏移，确保布局稳定。

svg 默认以基线（baseline）方式对齐，导致父容器出现意外位移；通过统一设置 `vertical-align: middle` 可消除该偏移，确保布局稳定。

在 CSS 布局中，当

和

虽然尺寸相同、样式一致，但一旦其中一方包含 SVG，另一方为空，两者的基线位置就会因 SVG 的内在排版行为产生差异——这正是视觉上“错位”或“ unwanted shift”的根源。

根本原因在于：SVG 是替换元素（replaced element），其默认 vertical-align 值为 baseline，而基线通常位于 SVG 底部边缘上方约 4px 处（取决于字体度量），导致父级 inline-block 容器整体向下偏移，以对齐该基线。

✅ 解决方案非常简洁有效：
为所有参与并排布局的 inline-block 容器（如 .box1 和 .box2）显式声明相同的 vertical-align 值：

.box1,
.box2 {
  vertical-align: middle; /* 推荐值：middle / top / bottom / text-bottom */
}

? vertical-align: middle 并非相对于父容器高度居中，而是将元素的中点与父行内框的基线 + x-height/2 处对齐。对图标类小尺寸 SVG 来说，middle 表现最自然；若需绝对顶部/底部对齐，可选用 top 或 bottom。

其他可选方案（按推荐度排序）：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• ✅ vertical-align: top：彻底脱离基线逻辑，适合严格顶部对齐场景；
• ⚠️ font-size: 0 on parent：消除行高影响，但可能影响内部文本渲染（不推荐混合文本使用）；
• ❌ 避免仅给含 SVG 的盒子加 vertical-align —— 必须成对统一设置，否则仍会失衡。

完整修复后的 CSS 示例：

.box1,
.box2 {
  vertical-align: middle; /* 关键修复 */
}

.box1 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.box2 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #333333;
}

? 总结：SVG 引起的布局偏移本质是 CSS 行内对齐机制的体现，而非 bug。掌握 vertical-align 的作用对象（作用于行内级元素自身，而非其子元素）和常见取值含义，即可快速定位并解决此类问题。在构建图标系统、按钮组件或网格布局时，统一设置 vertical-align 应作为标准实践之一。