Bootstrap 5+按钮需为inline-flex才能使me-2生效；图标对齐应优先用d-flex align-items-center；多图标间距推荐gap-2；letter-spacing慎用于交互组件，宜用font-feature-settings微调。
图标在按钮里加me-2没反应？先看按钮的display模式
bootstrap 5+ 按钮默认是 display: inline-flex，这时 me-2 才能作用于子元素（比如 <i class="bi bi-search"></i>）；但如果项目里覆盖了 .btn 的样式，把它改成了 block 或 inline-block，那 me-2 就完全失效——它只对 flex/grid 容器的直接子项生效。
临时修复很简单：
- 给按钮加 d-inline-flex align-items-center
- 确保图标和文字是同级子元素，不被额外 <span> 或 <strong> 包裹
- 别给整个按钮加 me-2，那是控制按钮和兄弟元素的距离，不是内部间距
图标和文字总“不对齐”，vertical-align 不是万能解
行内图标（<i>）默认按 baseline 对齐，而文字基线会随字体、字号浮动，导致视觉下沉。Bootstrap Icons v1.10+ 内置了 vertical-align: -0.125em，但这个值只在图标是纯行内级、父容器没干扰 flex 属性时才起效。
更稳的做法：
- 改用 d-flex align-items-center 包裹图标 + 文字，彻底绕过 baseline 问题
- 如果必须用 vertical-align，优先试 -0.125em 或 text-bottom，别盲目写 middle
- SVG 图标自带内联 vertical-align？用 i.bi svg { vertical-align: inherit; } 重置再统一控制
多个图标并排时，gap 比每个都加 me-2 更干净
当按钮或工具栏里有多个图标（比如 <i class="bi bi-download"></i><i class="bi bi-share"></i>），逐个加 me-2 容易漏掉第一个或最后一个，还可能因 margin 折叠出错。
推荐结构：
- 父容器加 d-flex gap-2（Bootstrap 5.3+ 原生支持）
- 确保父容器是块级或 flex 容器，gap 对 inline 元素无效
- 需要兼容旧版？写个简单 CSS：.icon-group > *:not(:first-child) { margin-left: 0.5rem; }
别在 .btn 或 .form-control 上硬调 letter-spacing
虽然 letter-spacing 能生效，但在交互组件上容易引发光标偏移、选区虚线错位（尤其 Safari）、文字撑出边界等问题。它更适合纯文本容器，比如 <h1>、<p class="lead">。
如果真要微调图标旁的文字密度：
- 优先用 font-feature-settings: "kern" 配合固定 font-size 和 line-height
- 单位用 em（如 letter-spacing: 0.04em），避免 px 在响应式下失配
- 英文主导区域（如导航链接）可设更小值：letter-spacing: 0.02em
真正麻烦的不是哪一行 CSS 写得对，而是同一套规则在 font-size: 0.875rem 和 1.25rem 下表现不一致。对齐和间距逻辑最好抽成复用类，统一挂载在项目根 CSS 里。
