当页面中同时存在含文本内容与空内容的 inline-block 按钮时，因默认 vertical-align: baseline 行为导致视觉错位；只需统一设置 vertical-align: top 即可修复对齐异常。
当页面中同时存在含文本内容与空内容的 inline-block 按钮时，因默认 `vertical-align: baseline` 行为导致视觉错位；只需统一设置 `vertical-align: top` 即可修复对齐异常。
在 css 布局中，display: inline-block 是实现水平排列且保持块级特性的常用方式。但其默认的垂直对齐行为常被忽视：所有 inline-block 元素默认按 vertical-align: baseline 对齐——即依据元素内“基线”（通常由文本决定）进行对齐。
问题就出现在这里：
- 含文本（如 “X”）的
- 纯空格或空白按钮（如 或仅空格）虽可视为空内容，但浏览器仍会为其生成一个极小的行内盒子，其基线位置与含文本按钮不一致；
- 结果是：含内容按钮“下沉”对齐，空按钮“上浮”，造成整行视觉错位，看似“顺序混乱”。
✅ 正确解法：显式声明 vertical-align: top（或其他统一值，如 middle、bottom），强制所有按钮顶部对齐：
button { background-color: #fff; /* 修正：#ffff → #fff */ border: 1px solid #999; width: 120px; height: 120px; margin-top: -1px; margin-right: -1px; font-size: 50px; font-weight: bold; vertical-align: top; /* ? 关键修复：消除 baseline 差异 */ }? 补充说明与注意事项：
立即学习“前端免费学习笔记（深入）”；
- vertical-align 仅对 inline、inline-block、table-cell 元素生效，对 block 或 flex 容器子项无效；
- 若后续改用 Flexbox 布局（推荐现代方案），可完全规避此问题：
div > div { display: flex; } /* 子按钮自动左对齐、顶对齐 */ button { flex: 0 0 120px; } /* 固定尺寸，避免伸缩 */ - 空按钮建议使用 或 font-size: 0 + line-height: 0 配合 ::before 伪元素增强语义与可访问性，而非依赖纯空白；
- 浏览器兼容性无虞：vertical-align 自 IE6 起全面支持，inline-block 在 IE8+ 稳定可用。
总结：这不是 bug，而是 CSS 规范中 baseline 对齐机制的自然表现。理解 vertical-align 的作用对象与默认值，是精准控制 inline-block 布局的关键一步。