按钮间空隙常由HTML换行符或空格引起，属文本节点而非盒模型问题；解决方法包括：删换行、用CSS margin配合:last-child、父容器flex+gap、避免padding替代、慎用!important、Bootbox需改wrapper样式、禁用 /、兼容旧浏览器可用HTML注释包裹空白。
按钮之间莫名有空隙，检查是否是HTML换行符导致的
这不是CSS没写对，而是浏览器把代码里的换行符、空格当成了真实空格渲染出来。哪怕你写了 margin: 0、padding: 0，空隙照旧存在——因为它是文本节点，不是盒模型的一部分。
- 打开开发者工具，选中按钮，看 computed 样式里有没有异常的
margin或padding：通常没有，这就基本能锁定是 HTML 空白符问题 - 检查源码中两个
<button>标签是否换行或缩进，比如：<button>A</button><button>B</button>是紧挨着的，而<button>A</button>\n<button>B</button>就会出空隙 - 临时验证方法：把相关按钮标签全部写在同一行，刷新页面，空隙消失 → 就是它了
用 CSS margin 控制间距最直接可靠
只要不是被 HTML 空白符干扰，margin 就是最可控的方式，尤其适合固定像素间隔或响应式场景。
- 给按钮统一加右外边距：
button { margin-right: 8px; }，但注意最后一个按钮会多出空白，可用:last-child清掉：button:last-child { margin-right: 0; } - 如果按钮在容器内且数量不固定，推荐用父容器控制：
.btn-group { display: flex; gap: 12px; }——gap不受子元素display类型影响，且自动避开首尾 - 避免用
padding替代margin：它改变按钮自身尺寸，可能影响文字居中或点击热区
Bootstrap 按钮组里别乱套 class，优先用官方工具类
Bootstrap 自带的 .btn-group 和 .btn-group-sm 已经处理好了间距逻辑，硬加自定义 margin 容易冲突。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 标准写法：
<div class="btn-group"><button class="btn btn-primary">Save</button><button class="btn btn-secondary">Cancel</button></div>，内部按钮默认无额外间隙 - 想加大间距？改用
.btn-group-lg或配合gap（需 Bootstrap 5.3+）：<div class="btn-group d-flex gap-2">... - 手动加
margin时，慎用!important：Bootstrap 的.btn本身带margin-left: -1px（用于边框重叠），强行覆盖可能让边框错位
Bootbox.js 对话框按钮间距要改 wrapper 而非 button 本身
Bootbox 生成的按钮是动态插入的，直接给 button 加 margin 很容易被内联样式覆盖，或者因 DOM 插入时机晚于样式加载而失效。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给整个按钮区域加 class，再通过后代选择器控制，例如：
bootbox.dialog({ ..., className: "my-bootbox-dialog" });，然后写 CSS：.my-bootbox-dialog .modal-footer button { margin-left: 8px; } - 如果按钮数量少且固定，也可以在
buttons配置里用className给每个按钮单独加 class，再针对性设margin - 不要依赖
<br>：它们破坏语义、增加维护成本，且在不同屏幕下表现不稳定
实际项目里最容易被忽略的，是 HTML 换行符和 CSS gap 的兼容性边界——老版本浏览器不支持 gap，而删换行又让模板难读。真要兼顾，就用 HTML 注释把空白包起来：<button>A</button><!-- --><button>B</button>。
