当页面中混合存在带内容与空内容的 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 对齐，即以基线（baseline）为参考线进行排列。
而基线的计算依赖于元素内部内容（尤其是文本）的字体度量：有文本内容的元素会生成明确的基线；纯空元素（如 中仅含空格或完全空白）则基线位置模糊，浏览器可能依据行内盒模型的默认规则将其“下沉”对齐，导致视觉上明显偏移——这正是问题中第二行中间按钮（含 " X "）看似“高出一截”，实则是周围空按钮向下错位所致。
✅ 正确解法是显式覆盖默认行为，在 button 样式中添加：
button {
background-color: #fff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
vertical-align: top; /* ? 关键修复声明 */
}? 注意：vertical-align 仅对 inline、inline-block、table-cell 等非块级元素生效；对 display: block 无效。同时，该属性影响的是元素在当前行内格式化上下文（IFC）中的对齐位置，而非父容器的 flex 或 grid 对齐。
立即学习“前端免费学习笔记（深入）”；
? 补充建议：
- 若项目已广泛使用 inline-block 布局，建议将 vertical-align: top 作为 button、img、input[type="button"] 等内联级组件的基础样式之一；
- 更现代的替代方案是改用 display: flex（父容器设 display: flex; flex-wrap: wrap;）或 display: grid，二者天然规避 baseline 对齐陷阱，语义更清晰、控制更精准；
- 避免依赖空格占位（如 ）来维持尺寸——应通过 min-width/min-height 或伪元素（::before { content: "" }）实现，确保结构语义纯净。
总结：vertical-align: top 是解决 inline-block 垂直错位最轻量、兼容性最佳的方案；理解其作用机制，能有效避免大量“看似随机”的布局偏移问题。
