SVG 默认以基线（baseline）方式对齐，导致父容器出现意外位移；通过统一设置 vertical-align: middle 可消除该偏移，确保布局稳定。
svg 默认以基线（baseline）方式对齐，导致父容器出现意外位移；通过统一设置 `vertical-align: middle` 可消除该偏移，确保布局稳定。
在 CSS 布局中，当 <svg> 作为 display: inline-block 元素的子元素时，它会像文字一样参与行内格式化上下文（inline formatting context），默认按 baseline 对齐。而 <div class="box1"> 和 <div class="box2"> 虽然尺寸相同、样式一致，但一旦其中一方包含 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。
其他可选方案（按推荐度排序）：
- ✅ 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 应作为标准实践之一。
