移动端按钮间距不能只靠margin，因为margin是透明空隙、不增加可点击面积，无法满足wcag要求的44×44px最小触控目标；纯margin在高dpr屏上像素值缩水（如margin: 8px在iphone @2x下仅约16px），易致误触或点击失效。
移动端按钮间距为什么不能只靠 margin
移动端按钮间距光设 margin 容易导致点击区域过小或误触，因为 margin 是透明空隙，不增加可点击面积。WCAG 要求最小触控目标为 44×44px，纯 margin 无法满足这一物理尺寸需求。
- 用
margin: 8px在 iPhone 上实际只有约 16px（@2x 屏），远低于安全距离 - 按钮本身若宽高不足 44px，仅靠外部
margin会放大误触风险 - 某些安卓 WebView 对
margin-bottom在position: fixed按钮上渲染不稳定
推荐组合：padding + gap + rem 单位
真正可靠的移动端按钮间距方案是三层叠加：用 padding 扩展热区、用 gap 控制布局空隙、用 rem 保证缩放一致性。
-
padding设在按钮自身：如padding: 0.5rem 1rem，确保内容区 ≥ 44px - 父容器设
display: flex+gap: 0.75rem，避免:last-child清除逻辑出错 - 禁用
margin-right单独写法——它在 flex 下冗余，且在 Safari 中可能触发意外换行 - 不用
%或px：比如margin: 5%会随屏幕宽度跳变，margin: 12px在 iPad Pro 上太紧、在小屏上又太松
真机调试时容易忽略的渲染差异
iOS Safari 和部分安卓浏览器对按钮间距的渲染逻辑和桌面不同，很多“看起来正常”的 CSS 在实机上会失效。
- 按钮被包在无
border、无padding的div中时，子按钮的margin-top可能塌陷到父容器外——加overflow: hidden或padding-top: 0.1px就能封住 -
letter-spacing在 iOS 17+ 上对中文字体有 baseline 偏移，如果按钮含中英文混排（如「下载 Download」），gap再大也救不了视觉错位，得配合text-rendering: optimizeSpeed - 用
line-height控制多行按钮文字时，绝对值（如line-height: 20px）在高 DPR 屏上会导致行距压缩，必须用无单位值（line-height: 1.4）
Bootstrap 或框架里怎么安全加间距
在 Bootstrap 5+ 导航栏或按钮组中，直接改 .nav-item 或 .btn 的 margin 很危险，框架自带的 ms-auto、me-2 类可能覆盖你的规则。
- 优先用框架内置间距工具类：
me-3（margin-right: 1rem）、mb-2（margin-bottom: 0.5rem），它们已做移动端适配 - 若需自定义，写在
@media (max-width: 768px)内，并加!important防止被.navbar-nav的flex-wrap: wrap干扰 - 别碰
.navbar-collapse的padding——它会影响整个折叠菜单的展开位置，间接拉偏按钮间距
box-sizing、以及它的父级有没有触发 BFC —— 这些都会让同一段 gap 或 margin 表现出完全不同效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
