inline-block元素默认vertical-align: baseline是CSS 2.1规范行为；其baseline指元素自身基线（如图片底边向上约4px），与父行框文本baseline对齐导致视觉错位，需显式设置vertical-align或改用flex布局。
inline-block 元素默认对齐 baseline 是 CSS 规范行为
不是 bug，是 CSS 2.1 明确规定的：所有 display: inline-block 元素在行内格式化上下文中，默认以 vertical-align: baseline 参与对齐。这里的 baseline 指的是元素自身的基线（通常接近文本底部），而非父容器的文本基线——但两者会相互作用，导致视觉上“错位”。
为什么图片和按钮放一起会看起来一高一低？
常见现象：<img alt="为什么CSS中行内块inline-block的对齐方式会受baseline影响？" > 默认 vertical-align: baseline，其 baseline 被定义为图像底边向上留出约 4px 的空间（用于容纳下行字母如 g、y 的 descender）；而 <button></button> 或 <input type="button"> 的 baseline 位置不同，且受字体度量影响。结果就是它们的 baseline 不重合，浏览器按规则对齐后，视觉上就“不平齐”。
实操建议：
- 统一显式设置
vertical-align，比如vertical-align: top、vertical-align: middle或vertical-align: bottom - 避免依赖默认值，尤其在混合使用
<img alt="为什么CSS中行内块inline-block的对齐方式会受baseline影响？" >、<span></span>、<button></button>时 -
vertical-align: middle并非居中于父容器高度，而是将元素的 middle 点对齐到父行框内 text-bottom 和 text-top 中点，实际效果常偏高
font-size: 0 在父容器上能消除间隙，但要注意副作用
行内元素间的空白符（换行、空格）会被渲染为一个空格字符，其宽度由父容器的 font-size 决定。设为 0 后，空格“消失”，inline-block 看似紧贴——但这会同时让子元素内文本不可读，除非子元素单独重设 font-size。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法：
- 移除 HTML 中
inline-block元素之间的换行和空格（写成<div></div> <div></div>连写） - 用
flex替代inline-block布局，彻底避开 baseline 问题 - 若必须用
inline-block，优先用vertical-align: top，它最可预测
baseline 对齐在不同 font-family 下表现不一致
因为 baseline 位置依赖字体内部的度量数据（ascent/descent/metrics），同一段 HTML 在 font-family: "Helvetica" 和 font-family: "Noto Sans CJK" 下，<span>文字</span> 与 <img alt="为什么CSS中行内块inline-block的对齐方式会受baseline影响？" > 的对齐结果可能明显不同。
这意味着：
- 不要假设
vertical-align: baseline在多字体项目中表现稳定 - 设计系统或组件库中，如果封装了
inline-block布局模块，必须强制约束vertical-align值 - 调试时可用浏览器开发者工具选中元素，查看 computed 样式里的
vertical-align和line-height，它们共同决定 baseline 位置
inline-block），它的垂直定位就绕不开 vertical-align 和父行框的基线计算。忽略这点，再小的布局偏差都可能反复出现。 
