按钮间距被HTML换行符撑开，根源是标签间空白符生成“幽灵间隙”；解决方式优先用flex+gap，次选HTML注释消除空白或父容器font-size:0，避免滥用margin。
按钮间距被HTML换行符撑开，怎么快速定位
按钮之间出现无法用margin或padding消除的空隙，大概率不是样式没写对，而是源码里两个<button>标签之间有换行或缩进。浏览器会把换行符、空格当作文本节点渲染，产生约4px的“幽灵间隙”——你在开发者工具里查computed样式，margin和padding全是0，但盒模型外沿就是不贴着。
验证方法很简单：
把相关按钮标签全部写在同一行（比如<button>确定</button><button>取消</button>），刷新页面，空隙消失 → 就是它了。
- 别在
<div class="btn-group">里手动敲回车排版，改用CSS控制可读性 - 如果必须保留换行结构，用HTML注释包裹空白：
<button>A</button><!-- --><button>B</button> - 旧项目中遇到
inline-block按钮组，可在父容器设font-size: 0，再单独给button设回正常字号
用flex + gap统一控制按钮组间距
这是目前最干净、最可控的方式，尤其适合数量不固定或需响应式调整的按钮组。父容器设display: flex后，gap直接作用于相邻子项，完全绕过HTML空白符干扰，也不受margin塌陷影响。
示例：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.form-actions {
display: flex;
gap: 12px;
}
注意点：
-
gap在Flex布局中兼容性良好（Chrome 84+/Firefox 63+/Safari 14.1+），IE全系不支持，如需兼容IE，得回退到margin-right+:last-child - 如果按钮本身是
display: block，gap依然生效；但若父容器是grid，gap行为一致，无需额外处理 - 避免同时写
gap和margin：当gap存在时，相邻项的margin会被忽略（不是合并，是直接不参与计算）
Bootstrap或Bootbox中改按钮间距的正确路径
硬加margin到button上，在Bootstrap或Bootbox这类封装库中极易失效。原因很实在：Bootstrap的.btn-group内部已用负margin-left做边框重叠；Bootbox动态插入按钮，样式可能加载早于DOM，或被内联style覆盖。
正确做法是“向上找容器，向下控后代”：
- Bootstrap：优先用内置类，比如
<div class="btn-group gap-2">（Bootstrap 5.3+），或<div class="btn-group btn-group-sm">，别自己套margin - Bootbox：在
bootbox.dialog()中传入className，例如className: "my-form-dialog"，然后写.my-form-dialog .modal-footer button { margin-left: 8px; }，确保选择器权重足够 - 所有自定义
margin都避开!important——它容易破坏Bootstrap的边框对齐逻辑，导致视觉错位
margin设了但按钮不动？先查这三件事
写了button { margin-right: 10px; }却没反应，问题往往不在CSS语法，而在上下文环境。真正在现场卡住人的，是这些隐性条件：
- 父容器是
display: grid或flex且设置了justify-content: center：此时按钮被居中为一个整体，margin-right只在组内生效，对外不可见 - 按钮被包在
<p>里，且p自带margin-bottom，和按钮的margin-top发生塌陷 → 改用统一设margin-bottom，或给p加overflow: hidden - 按钮用了
position: absolute或transform：此时margin仍存在，但布局已脱离文档流，视觉上“不动”
真正麻烦的从来不是“怎么加间距”，而是加完之后发现它藏在某个布局模式的缝隙里，无声无息地被吞掉了。
