margin是元素外边距，控制本元素与相邻元素间距；padding是内边距，控制内容与自身边框间距；gap用于flex/grid容器内子项间距。
margin 和 padding 的本质区别在哪里
很多人以为 margin 和 padding 都是“加空隙”，但它们作用的位置完全不同：margin 是元素**外边距**，控制的是本元素和相邻元素之间的距离；padding 是元素**内边距**，控制的是内容（比如文字、子元素）和元素自身边框之间的距离。
典型误用场景：想让按钮文字离边缘远一点，却去调 margin —— 这只会把整个按钮推走，真正该改的是 padding。
设置 margin 时常见的塌陷和意外重叠
块级元素的上下 margin 会“合并”（collapse），比如两个 <p></p> 各设 margin-bottom: 20px 和 margin-top: 20px，实际间距不是 40px，而是 20px。这是 CSS 规范行为，不是 bug。
- 避免塌陷的方法之一：只给上面元素设
margin-bottom，下面元素不设margin-top - 父容器触发 BFC（如设置
overflow: hidden）可阻止子元素margin外溢 - 使用
display: flex或display: grid布局时，margin不会塌陷，但要注意gap属性更合适控制项目间距
padding 对盒模型和点击热区的影响
padding 会增大元素的总尺寸（除非你用了 box-sizing: border-box）。比如一个宽高 100px 的按钮，加 padding: 10px 后，在默认 box-sizing: content-box 下，实际占位变成 120×120px。
立即学习“前端免费学习笔记（深入）”；
更重要的是：点击区域（热区）包含 padding 区域。这意味着给按钮加 padding 不仅让文字更舒展，还让手指/鼠标更容易点中——这在移动端尤其关键。
- 始终建议在全局重置中加上
* { box-sizing: border-box; } - 不要靠增加
margin来“撑开”可点击范围，那是反模式 - 图标按钮若只有
width/height没设padding，很可能点不中
什么时候该用 gap 而不是 margin
当你要控制的是**容器内部多个子项之间的间距**（比如 flex 或 grid 布局中的列表项），优先用 gap。它比对每个子项单独设 margin 更干净、无副作用。
例如：display: flex 容器里三个按钮，用 gap: 8px 就能统一控制两两间距；如果用 margin-right，最后一个按钮会多出一段空白，还得额外清除。
-
gap在flex中支持较新（Chrome 85+，Firefox 63+），IE 完全不支持 -
gap可分别设row-gap和column-gap，比margin更精准 - 不要在非 flex/grid 容器上硬套
gap，它不会生效
间距控制不是堆数值，而是理解空间归属：是“我跟别人之间”（margin），还是“我里面的内容跟我自己之间”（padding），又或是“我们这一组内部怎么排”（gap）。漏掉其中一层，样式就容易反复返工。
