推荐用 flex + gap 布局按钮组，避免 margin 间距不均问题；若需兼容 IE，则用 button:not(:last-child) 统一右/下边距，并确保 box-sizing: border-box 和 display 一致。
按钮用 margin 间距不均，大概率是盒模型混用
直接给所有按钮加 margin-right 或 margin-bottom 看似简单，但实际常出现最后一项多出空白、换行后对不齐、或某些按钮没生效。根本原因是：部分按钮是 inline（如 <button> 默认）或 inline-block，而 margin 在行内元素上对垂直方向（margin-top/margin-bottom）无效；另外，不同浏览器对 button 的默认 box-sizing 和内边距处理也有差异。
- 检查是否混用了
display: inline和display: block按钮 —— 统一设为display: inline-block或display: flex容器更可控 - 确认所有按钮的
box-sizing一致，推荐统一写box-sizing: border-box - 避免只靠
margin-right，最后一项会多出空隙 —— 改用gap（在 Flex/Grid 中）或用:not(:last-child)选择器
用 flex + gap 是最稳的解法
现代布局中，把按钮父容器设为 display: flex，再用 gap 控制间距，完全绕过 margin 的各种边界问题。它天然忽略首尾额外间隙，且支持响应式单位（如 gap: 0.5rem）。
div.btn-group {
display: flex;
gap: 12px; /* 所有按钮间统一 12px 间距 */
}
<p>/<em> 如果需换行，加 flex-wrap </em>/
div.btn-group {
flex-wrap: wrap;
gap: 8px 12px; /<em> 行间距 8px，列间距 12px </em>/
}-
gap在 IE 中不支持，如需兼容 IE，必须回退到margin+:not(:last-child) - 若按钮高度不一致，
flex默认align-items: stretch会拉高矮按钮 —— 加align-items: center更自然 -
gap对visibility: hidden的元素仍生效，但对display: none的元素自动跳过
兼容 IE 时，margin 必须配合 :not(:last-child)
不能写 button { margin-right: 12px; }，否则末尾按钮右侧永远多出 12px。正确做法是只给「非最后一个」按钮加右距：
button {
display: inline-block;
box-sizing: border-box;
}
<p>button:not(:last-child) {
margin-right: 12px;
}- 注意：如果按钮是动态插入/删除的，
:last-child可能匹配到非按钮元素（比如后面跟了<span>），此时应改用:last-of-type或加统一 class（如.btn）后用.btn:not(.btn:last-of-type) - 水平排列用
margin-right，垂直排列用margin-bottom，逻辑一致 - 慎用
margin: 0 12px 0 0这类简写 —— 容易误覆盖已有的上下 margin
别忽略按钮自身的 border 和 padding 影响视觉间距
看起来“间距不均”，有时不是 margin 的问题，而是按钮内部 padding 不一致，或 border 颜色/粗细不同导致视觉重心偏移。尤其当按钮有 hover 状态时，border-color 变化会让间距“忽大忽小”。
立即学习“前端免费学习笔记（深入）”；
- 统一重置：
button { border: 1px solid transparent; padding: 8px 16px; } - 如果用了
outline（如焦点态），它不占布局空间，但会视觉“撑开”，必要时用outline-offset: -2px微调 - 字体大小、行高差异也会让按钮基线不对齐，加
vertical-align: middle或align-items: center（在 flex 中）更可靠
实际排布中，gap 是首选，但只要涉及旧项目或需要精确控制单个按钮外距，:not(:last-child) 就绕不开。最容易被忽略的是：按钮是否真正在同一个 DOM 层级、有没有隐藏元素干扰 :last-child 判断，以及 box-sizing 是否全局统一。
