用 display: flex 最稳：父容器设 display: flex + justify-content:center（居中）、flex-start（左对齐）或 flex-end（右对齐），天然抗 html 白空干扰，无需处理 inline-block 间隙问题。
多个按钮水平对齐用 display: flex 最稳
直接给按钮父容器加 display: flex，再配 justify-content: center（居中）、flex-start（左对齐）或 flex-end（右对齐），就能让所有按钮在一行内整齐排开。它不依赖按钮是否带空格、换行符或默认 inline-block 行为，天然抗 HTML 白空干扰。
常见踩坑点：
- 父容器没设
display: flex，只在 button 上写display: inline-block—— 按钮会因 HTML 换行/空格产生 4px 左右间隙，视觉错位 - 用了
gap: 8px却发现首尾按钮离容器边缘太近 ——gap只管项目之间，首尾间距得靠父容器的padding - 按钮里混了图标或不同字号文字，高度不一致 —— 统一加
align-items: center，并确保所有按钮都设box-sizing: border-box和固定height
按钮垂直堆叠时底部不对齐？检查 flex-direction 和 margin-top: auto
卡片类布局中，多个按钮需“底部对齐”（比如每个卡片底部都有一组操作按钮），不能只靠 margin-bottom 或 vertical-align。核心是让卡片容器变成 column 方向的 flex，并把按钮或其直接父容器推到底部。
关键条件：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 卡片容器必须显式声明
flex-direction: column，否则margin-top: auto无效 -
margin-top: auto要加在按钮的**直接父元素**上（比如<div class="card-actions">），而不是按钮本身 <li>外层网格或 flex 容器需保证卡片等高：用 <code>align-items: stretch（flex）或grid-template-rows: 1fr（grid） <td> 内部用 <code>display: flex+gap: 4px管理按钮间距- 所有按钮统一设
vertical-align: middle和box-sizing: border-box，避免浏览器默认 border/padding 差异导致高低不一 - 禁用
float或position: relative微调 —— 它们会破坏表格行高计算，引发整体错位 - 全局加
button { box-sizing: border-box; }—— 让 padding/border 不撑大尺寸 - 明确设
height: 36px（或你设计系统的标准高度） - 配套设
line-height: 36px（单行文本）或display: flex; align-items: center; justify-content: center;（兼容多行/图标） - 禁用
em、rem混搭：比如 input 用height: 2em，button 用height: 36px，字体度量差异会让它们永远对不齐
表格单元格里按钮挤成一团？别碰 margin，改用 td + flex
把按钮直接塞进 <td> 里，默认会左上角堆叠、无间距、基线错乱。此时不要给 button 加 <code>margin，而是从 <td> 入手。
<p>推荐组合：</p>
<ul><li><code><td> 设 <code>padding: 8px 提供呼吸空间
按钮高度不一致？统一 box-sizing + height + line-height 是底线
不同浏览器对 <button></button> 的默认 line-height、font-size、border 处理略有差异，尤其混用图标和纯文本按钮时，高度肉眼可见不齐。
真正有效的重置方案：
最易被忽略的是：按钮是否被 JS 动态加了 position: absolute 或 float？一旦脱离文档流，上面所有 flex/gap/height 规则都会失效，得先查 computed styles。
