vertical-align: baseline是默认值，但不保证视觉对齐，因文字基线（x底边）、图片底边、表单控件基线定义不同，混排时易错位；可靠方案是显式设bottom/middle或改用flex布局。
vertical-align: baseline 是默认值，但不等于“对齐了”
所有行内元素（如 <span>、<a>、<em>）和行内块元素（如 <img>、<input>）默认就是 vertical-align: baseline。但这不意味着它们看起来“对齐整齐”——因为基线位置取决于字体度量，而不同元素的基线定义根本不同：
-
<span>文字的基线是字母 x 底边所在水平线，受当前字体 descender（如 g、y 的下延部分）影响 -
<img>是替换元素，规范明确定义其基线 = 底边（bottom margin edge），不是图像内容底部，更不是视觉底边 -
<input type="text">默认也是 baseline 对齐，但它的“基线”由浏览器合成，各引擎实现有 1–2px 差异
所以两个相邻 <span> 看似对齐，一旦混入 <img> 或 <input>，立刻出现空白或错位——这不是 bug，是 baseline 机制本身的设计结果。
为什么 vertical-align: baseline 在行内混排里容易出问题
行内盒子的基线对齐依赖整行的“行框（line box）”计算，而该行框高度由其中最高升部（ascent）和最深降部（descent）共同决定。只要存在以下任一情况，baseline 就会漂移：
- 同一行内混用不同字号（例如
<span style="font-size:14px">小</span><span style="font-size:18px">大</span>），基线虽对齐，但顶部/底部明显参差 - 文字含 descender 字母（如 “gyp”），实际基线位置比纯 “x” 更低，导致周围元素被“顶高”
-
<img>没设vertical-align，它用默认 baseline → 底边对齐文字基线 → 文字下方留白 ≈ descender 高度 - 父容器设了
line-height，但未同步调整font-size或 padding，行框撑高后基线锚点相对偏移
真正可控的基线对齐做法：放弃单靠 vertical-align
想让行内元素“看起来对齐”，靠 vertical-align: baseline 单打独斗基本不可靠。更务实的做法是组合控制：
立即学习“前端免费学习笔记（深入）”；
- 对图片统一加
vertical-align: bottom或vertical-align: middle，直接绕过基线歧义 - 对表单控件（
<input>、<select>）显式设vertical-align: middle，比 baseline 更稳定 - 若必须保留 baseline 行为（如嵌入段落的微小图标），用
font-size: 0清除父容器行高干扰，再给子元素单独设字体大小 - 用
display: inline-flex替代纯 inline 布局，通过align-items: center实现像素级可控对齐（注意兼容性：IE 不支持）
示例：消除 <img> 下方空白
<span>文字</span><img src="icon.png" alt="icon" style="vertical-align: bottom;">
容易被忽略的细节：字体回退会让 baseline 偏移
同一段 HTML，在 Chrome 里用系统 San Francisco 显示，在 Safari 里 fallback 到 Helvetica，基线位置可能差 1–2px——因为不同字体的 descender 度量不同。如果你在做 PDF 导出、设计稿还原或跨平台表单对齐，别把 vertical-align: baseline 当作最终对齐依据。更稳妥的是：
- 固定
line-height（如line-height: 1.5），避免浏览器自动计算行框高度 - 用
height+line-height+padding组合微调容器，而非只动vertical-align - 对关键对齐场景（如注册表单 label/input），优先用 flex 布局替代 inline 混排
基线是排版底层概念，不是 UI 对齐开关。理解它为何“不准”，比记住怎么“设 baseline”更重要。
