margin必须用CSS设置，HTML中button的margin属性无效；常见失效原因是flex/grid中gap覆盖margin、垂直margin合并、父容器塌陷或浏览器默认样式干扰，正确做法是用style或类选择器设置，并优先考虑gap或padding替代方案。
margin 必须用 CSS 设置，写在 HTML 标签里（如 <button margin="10px">）完全无效——浏览器直接忽略，不是 bug，是标准行为。
为什么 button 的 margin 看起来没反应？
常见错因不是代码写错，而是布局上下文干扰了视觉判断：
- 按钮是
inline-block元素，默认四边margin都生效，但若父容器是flex或grid，gap会覆盖相邻项的margin，导致“加了也没空隙” - 按钮被包在
<p>或<div>里，且兄弟块级元素存在垂直margin合并（collapsing margins），比如<p style="margin-bottom:20px"></p><button style="margin-top:20px">→ 实际只显示 20px 间距 - 父容器未清除浮动、或设了
overflow: hidden但高度塌陷，按钮被上层元素的 margin 区域“盖住”，看起来在，点不了
给多个按钮加等距右间距的三种写法
横向排列按钮时，别用空格或 —— 不可控、语义错误、缩进混乱：
-
button { margin-right: 12px; } button:last-child { margin-right: 0; }：简单直接，但全局生效，易污染其他按钮 -
.btn-group > button:not(:last-child) { margin-right: 12px; }：精准作用于特定容器，推荐用于模块化组件 -
.btn-group { display: flex; gap: 12px; }：现代写法，自动处理首尾间距、不触发 margin 合并、兼容 Safari 14.1+，移动端更稳
移动端和跨浏览器要注意的坑
按钮外边距在手机上不只是“看起来疏密”的问题，它直接影响可操作性：
立即学习“前端免费学习笔记（深入）”；
- Safari 默认给
button加margin: 0.5em，Chrome/Firefox 多为0，结果同一段代码在不同浏览器中按钮紧贴或自动分开——必须显式重置：button { margin: 0; vertical-align: middle; line-height: normal; } - 单纯设
margin: 8px在小屏上容易误触，WCAG 要求可点击区域 ≥ 44×44px，建议用padding扩展热区，margin只管间隔 - 单位优先用
rem（如margin: 0.5rem 0.75rem），比像素更适配缩放；避免%，因按父宽计算，按钮宽度变化时间距比例失真
真正难的从来不是写对 margin: 12px，而是审查元素时看到空白，得立刻判断：这是某个按钮的 padding 渲染出的热区，还是兄弟元素之间真实的 margin 空隙——前者可点，后者不可点，视觉一样，行为天差地别。
