图标使整行“撑高”是因为<img>/<svg>默认display: inline，按baseline对齐且受line-height影响；解决方案是改用display: flex + align-items: center，或display: block配合line-height: 1。
为什么图标一加进去，整行文字就“撑高”了？
根本不是图标本身太大，而是 <img> 或 <svg> 默认是 display: inline，参与行内格式化上下文（inline formatting context），浏览器会为它生成一个行框（line box），并按基线（baseline）对齐——而图标底边对齐的是文字基线，不是底线，加上默认 line-height 留出的 ascender/descent 空间，整行高度就被“拉高”了。
常见现象：没图标时行高 20px，加个 16×16 的 <img> 后变成 24–28px；表格里图标一插，<td> 高度突然变大；响应式缩放时错位更明显。
-
vertical-align: baseline是罪魁，它让图标底边去贴文字基线，而基线离文字底线还有 descent 距离 - 父容器若设了
line-height: 1.5或像素值，这个值会被应用到整行，包括图标所在行框 -
<svg>没设vertical-align时行为和<img>一致；字体图标（如 Font Awesome）还受font-family和font-size度量干扰 - 换行符、空格、甚至 HTML 缩进都会影响行框计算，导致高度浮动
用 display: flex 替代 inline 布局最稳
只要按钮、单元格或段落里有图标+文字混合，就别硬扛 line-height + vertical-align 组合。直接把容器设为 display: flex，align-items: center 无视基线，也不吃行高影响。
- 适用于
<button>、<span class="label">、<td>内部包裹等场景 -
<svg>和文字自动成为 flex item，无需额外vertical-align - 用
gap控制图标与文字间距，比margin-right更干净（不污染子元素 margin） - 注意：如果
<td>本身要保持表格布局语义，只对内部<div>或<span>设 flex，别动<td>自身 display
纯 inline 场景下怎么调 vertical-align 才有效？
vertical-align 不是无效，是生效条件太苛刻：它只对 display: inline、inline-block、inline-table 或 table-cell 元素起作用，且对齐目标是“行框 x-height 中线”，不是容器中心。
立即学习“前端免费学习笔记（深入）”；
- 必须确认图标元素计算后的
display是 inline 类型（查 DevTools → Computed → display） -
vertical-align: middle对多数 16px 图标较准，但若font-size变成 1.2rem，就得同步调line-height或改用vertical-align: -0.125em - 避免在 flex 容器里给子项写
vertical-align——它完全被忽略 - 字体图标库（如 FA6）可能自带
vertical-align: -0.125em，覆盖你写的规则，得用!important或提高选择器权重
line-height 设成 1 还有空白？那是 line box 没清干净
哪怕 line-height: 1，图标下方仍留白，说明你没切断行内上下文。真正起效的前提是：图标脱离 baseline 对齐机制，且行框高度归一化。
- 对图标包裹层（如
<span class="tooltip">）设display: block，不是inline-block - 配套
line-height: 1+margin: 0+padding: 0，否则 margin/padding 会撑开块级盒 - 别在父容器上设
line-height，它会影响所有行内后代；只作用于图标自身容器 - 若图标需保持 inline 位置（比如嵌在段落中），用
display: inline-flex替代inline-block，再加align-items: center
基线对齐不是 bug，是排版规范；但业务 UI 要的是确定性。能用 flex 就别调 vertical-align，能设 block 就别留 inline —— 多数“调不准”问题，根源不在数值，而在布局模式选错了。
