按钮间距该用 margin 而非 padding，因 padding 作用于内部、扩大热区且不产生真实布局空隙，而 margin 作用于外部、仅控制元素间透明间距；推荐 flex 容器下使用 gap 统一管理间距。
按钮间距该用 margin，不是 padding；误用 padding 会把“空白”变成可点击区域，反而让视觉间距和交互热区混淆。
为什么按钮之间加 padding 不能控制间距
因为 padding 是作用在按钮**内部**的：它撑开按钮自身尺寸，同时让文字离边框更远，但不会影响按钮和其他元素之间的距离。你看到两个按钮“挨得近”，本质是它们各自的 padding 区域在视觉上重叠或紧贴，并非真正留出了布局空隙。
- 按钮 A 设
padding: 12px→ 宽高变大，背景色填满这部分，但它的右边缘仍紧贴按钮 B 的左边缘 - 按钮 B 同样设
padding: 12px→ 它的左边缘也紧贴按钮 A 的右边缘 - 结果：两个按钮之间没有间隙，只有各自内边距渲染出的“厚实感”，但用户点击时热区可能意外连通
margin 才是控制按钮间距的正确方式
margin 作用于按钮**外部边界**，直接决定它和相邻元素（包括兄弟按钮）之间的距离。这个距离是透明的、不响应点击、不影响背景填充，纯粹用于布局分隔。
- 给按钮加
margin-right: 8px→ 它的右边框到下一个按钮左边框之间就有 8px 空白 - 若两个按钮都设
margin: 0 8px 0 0，实际间距仍是 8px（不是 16px），因为外边距在水平方向不合并 - 使用
gap（如display: flex容器下）比重复写margin更干净，且能避免最后一个按钮多出多余间距
移动端和 Flex 布局下的典型陷阱
在小屏设备或现代布局中，margin 和 padding 的单位选择、继承逻辑、以及父容器是否触发 BFC，都会放大误用后果。
-
margin-left: 5%是按父容器宽度计算的，按钮本身宽度变化时，间距比例会失真；推荐用px或rem - 用
flex排按钮时，别再每个按钮都加margin-right，改用容器级gap: 8px，语义清晰且自动规避末尾溢出 - iOS Safari 对
position: fixed按钮的margin-bottom支持不稳定，遇到底部间距失效，优先换padding-bottom或transform: translateY() - 如果按钮被包在没
border、没padding、没内容的父容器里，子按钮的margin-top可能“漏出”，导致整个组往下掉——这时加overflow: hidden或padding-top: 0.1px就能封住
真正卡住人的从来不是记不住定义，而是审查元素时看到一个“看起来是间距”的空白，却分不清它到底是某个按钮的 padding 渲染出来的热区，还是兄弟元素之间真实的 margin 空隙——这两者在视觉上几乎一样，但行为截然不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
