最推荐用 margin-right 给图标加右外边距，如 保存；它语义清晰、支持响应式与多语言，避免空格带来的可访问性及维护问题。
用 最快，但别滥用
图标和文字之间加空格，最直接的方式是写 ，比如 <i class="icon"></i> 保存。它不会被浏览器合并，也不会折行，视觉宽度约等于一个英文字符。但问题在于：连续多个 （如 ）语义混乱、难维护，且屏幕阅读器会把每个 读作“空格”，影响可访问性。
适用场景仅限于极简静态文案，比如按钮里“? 新建”这种固定结构；一旦涉及响应式缩放、多语言或设计调整，立刻失控。
margin-left 是更干净的解法
给图标元素加左外边距，比如 <i class="icon" style="margin-right: 8px;"></i>保存，或者统一用 CSS 类：.icon-text { margin-right: 0.5em; }。这种方式不污染内容层，支持单位换算（em 随字体缩放，px 精确控制），还能用媒体查询动态调整。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 如果图标是行内元素（如
<i></i>或<svg></svg>），默认就能用margin - 避免对文字侧加
margin-left，容易在 RTL 语言（如阿拉伯语）中翻转错位 - 不要用
padding替代margin，那会撑大图标自身尺寸，可能破坏对齐
中文混排时慎用 letter-spacing
有人试图给整个容器设 letter-spacing: 4px 来“自动拉开”图标和文字间距，这在中英文混排时会出问题：中文字符之间也被等距拉开，导致“? 保 存”变成字字分离，阅读困难。而且 letter-spacing 作用于所有字符，无法只针对图标与文字之间的间隙。
真正需要微调时，应把图标和文字分别包裹进 <span></span>，再用 margin 单独控制它们之间的距离，比如：
<span class="icon-wrapper"><i class="icon"></i></span><span class="text">保存</span>
然后设 .icon-wrapper { margin-right: 0.4em; }。
white-space: pre 不适合这个场景
<span style="white-space: pre">? 保存</span> 看似能保留空格，但它会让整个 span 内所有空白（包括换行、制表符）都原样渲染，且禁用自动折行——一旦文字变长或容器变窄，就直接溢出或撑开布局。这不是“加空格”，而是强行冻结文本格式，和图标文字间距需求完全错位。
真正容易被忽略的是：空格的本质不是内容，而是视觉节奏。与其纠结“敲几个空格”，不如明确“这里需要多少像素/相对单位的留白”，然后用 margin 去实现。它不依赖字体度量，不干扰语义，也不影响无障碍访问。
