vertical-align: top 是解决 inline-block 按钮垂直错位最直接、兼容性最好的方案；因默认 baseline 对齐机制导致含文本与空内容按钮基线位置不一致，统一设为 top 可强制顶部对齐，避免视觉偏移。
vertical-align: top 是解决 inline-block 按钮错位最直接、兼容性最好的办法。不是 bug，是 baseline 对齐机制在起作用——只要没显式设置 vertical-align，浏览器就按默认的 baseline 算，而含文本和空内容的按钮基线位置天然不一致。
为什么 inline-block 按钮会“一高一低”
根本原因在于：所有 inline-block 元素默认 vertical-align: baseline，但“基线”由内容决定——
- 有文字的按钮（如
<button>X</button>）基线落在字体 x-height 底部附近 - 空按钮（如
<button></button>或仅空格）没有内联文本行，基线退化为 margin box 底边 - 两者基线位置不同，却强行对齐，视觉上就出现“一个下沉、一个上浮”的错位
vertical-align 值选 top 还是 middle？
top 是首选，middle 在某些字号/行高组合下仍可能微偏——尤其当按钮内文字 font-size 较大、line-height 未显式设为 1 时：
-
vertical-align: top对齐的是父容器的 content box 顶部，稳定、可预测 -
vertical-align: middle实际是对齐父元素 font-size / 2 + 行高 / 2 的位置，受字体度量影响，跨浏览器表现略浮动 -
vertical-align: bottom虽可用，但若按钮有 border 或 margin，底部容易紧贴下一行内容，留白难控
只给部分按钮加 vertical-align 会出问题吗
会。必须统一设置——哪怕只漏一个，它仍走 baseline 默认行为，就会把整行拉偏：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
button:first-child { vertical-align: top; }→ 第二个按钮仍错位 - 正确写法：
button { vertical-align: top; }或更稳妥地：button, input[type="button"], img { vertical-align: top; } - 如果按钮嵌套在
text-align: center的容器里，vertical-align: top不影响水平居中，可放心用
现代项目该不该继续用 inline-block 布局按钮
可以短期修，但长期建议迁移到 display: flex ——不是为了时髦，而是规避 baseline 陷阱本身：
-
flex容器子项默认align-items: stretch，高度自动拉齐，无需操心基线 - 写法更直白：
.btn-group { display: flex; gap: 8px; }+button { flex: 0 0 auto; } - 注意：IE11 支持
flex，但老版本存在flex-wrap和gap兼容问题；若需支持 IE10 及以下，inline-block + vertical-align: top仍是不可替代的底线方案
真正容易被忽略的点是：空按钮不要靠空格撑尺寸，也不要依赖 font-size: 0 配合伪元素来“假装有内容”。语义清晰的做法是显式设 min-width/min-height，再用 ::before { content: "" } 占位——这样既保结构，又不会因字体渲染差异引发新的 baseline 偏移。
