padding往里撑、影响自身尺寸和背景显示，margin往外推、不影响自身宽高；需背景延伸用padding，仅调间距用margin。
padding 是往里“撑”，margin 是往外“推”
直接说结论：如果你希望背景色、边框或阴影延伸到空白区域，用 padding；如果只是想让这个元素和隔壁元素离远点/近点，不改变自身视觉尺寸，就用 margin。
常见错误现象：
• 给按钮加了 padding: 12px，结果宽度超出了父容器——因为默认 box-sizing: content-box，padding 会额外加在 width 上；
• 两个 <p> 标签上下各设 margin-bottom: 20px 和 margin-top: 20px，结果间距只有 20px 而不是 40px——这是垂直 margin 合并（collapsing）。
-
padding在 border 内侧，会显示背景色/图，影响元素总尺寸 -
margin在 border 外侧，完全透明，不影响自身宽高，但控制与其他元素的距离 - 负
margin合法（比如margin-left: -10px可微调位置），负padding无效（浏览器会忽略）
什么时候必须用 padding，什么时候只能用 margin
看使用场景比记定义更管用：
- 让文字离按钮边框更舒服、让图标和文字之间有呼吸感 → 用
padding（背景/边框需覆盖该区域） - 让一个卡片和上一个模块空出 32px 间距 → 用
margin-top或margin-bottom（不希望卡片自身变大） - 想让块级元素水平居中 →
margin: 0 auto（只对设置了width的块级元素有效） - 清除浏览器默认样式干扰 →
body { margin: 0; }、p, h1-h6 { margin: 0; }（别依赖padding去“抵消”默认margin）
box-sizing 改变 padding 的行为逻辑
默认的 box-sizing: content-box 下，width: 200px; padding: 16px; 实际占宽是 200 + 16×2 = 232px。这常导致响应式断点错乱。
立即学习“前端免费学习笔记（深入）”；
更可控的做法是全局重置：
*, *::before, *::after {
box-sizing: border-box;
}
这样 padding 和 border 就被“包进”设定的 width 里，width: 200px; padding: 16px; 就真等于 200px 宽（内容区只剩 168px）。
-
border-box是现代布局的事实标准，尤其配合 Flex/Grid 时几乎必开 -
margin不受box-sizing影响，永远在盒子外部 - 注意：表单控件（如
<input>）在某些浏览器中默认是content-box，需显式设置
垂直 margin 合并是真实存在的坑
相邻块级元素的上下 margin 不叠加，而是取较大值。例如：
<div style="margin-bottom: 30px">A</div> <div style="margin-top: 20px">B</div>
AB 之间实际间距是 30px，不是 50px。这不是 bug，是 CSS 规范明确规定的。
- 合并只发生在块级流内（非浮动、非绝对定位、非 flex item）
- 父子间也可能合并（如父元素无 border/padding，子元素
margin-top会“冒泡”到父元素外边） - 规避方法：给父元素加
padding-top: 1px或border-top: 1px solid transparent
padding 和 margin 往往要一起用，但它们的职责边界很清晰：一个管“内部舒适度”，一个管“外部关系”。混淆二者最常导致的问题不是样式错，而是后期改一处牵动全局——比如把本该用 margin 的模块间距改成 padding，结果所有背景、阴影、圆角都得跟着重调。 
