统一图标与文字间距的关键是显式控制样式。1. 使用固定 margin-right（如8px）确保稳定间距；2. 采用 em 单位适配不同字号，提升响应式表现；3. 设置 vertical-align: middle 确保垂直对齐，必要时微调；4. 推荐使用 flex 布局配合 gap 属性，精确控制子元素间距，避免依赖默认渲染，提升一致性。
按钮中图标与文字间距不统一，常见于使用伪元素 ::before 插入图标时。由于图标是通过 CSS 生成的内容，其与文字之间的距离容易受字体、行高、图标大小等因素影响，导致视觉上不对齐或间距不一致。下面提供几种实用方法来统一控制间距。
1. 使用固定间距（推荐）
为伪元素图标设置固定的右边距，确保与文字之间保持一致距离。
.btn::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url(icon.png) no-repeat center;
margin-right: 8px; /* 关键：统一右间距 */
vertical-align: middle;
}
这样无论文字长短或字体如何，图标与文字之间始终有 8px 的间隔，布局稳定。
2. 使用 em 单位适配不同字号
如果按钮在不同场景下字号变化较多，使用 em 作为 margin 单位可实现相对间距，自动适配文本大小。
立即学习“前端免费学习笔记（深入）”；
.btn::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: url(icon.svg) no-repeat center;
margin-right: 0.5em; /* 相对于当前字体大小的间距 */
vertical-align: middle;
}
这种方式更灵活，适合响应式或组件化设计。
3. 统一垂直对齐
图标和文字可能出现上下错位，关键在于设置 vertical-align。
- 推荐使用 vertical-align: middle;
- 若文字行高较大，可尝试 vertical-align: -1px; 微调
- 确保图标容器高度与文字行高协调
4. 使用 flex 布局（替代方案）
如果兼容性允许，用 Flex 布局能更精确控制间距和对齐。
.btn {
display: inline-flex;
align-items: center;
gap: 8px; /* 统一间距 */
}
.btn::before {
content: "";
width: 16px;
height: 16px;
background: url(icon.png) no-repeat center;
}
gap 属性直接定义子元素间距，无需额外 margin，逻辑更清晰。
基本上就这些。用伪元素插入图标时，关键是显式控制 margin 和 vertical-align，避免依赖默认渲染行为。固定像素或 em 间距结合垂直对齐，能有效解决大部分不统一问题。
