padding会撑大元素尺寸，margin不会；标准盒模型下width/height仅含内容区，padding:20px使width:100px的div实际宽达140px，margin:20px则只推离邻居而不改变自身尺寸。
padding会撑大元素尺寸，margin不会
标准盒模型下（box-sizing: content-box），width 和 height 只管内容区。加 padding: 20px 后，一个 width: 100px 的 div 实际占宽变成 140px；而 margin: 20px 不改变这个 div 自身的尺寸，只是让它和邻居拉开 20px 距离。
常见错误现象：给按钮设了 padding 却没调 box-sizing，结果在栅格布局里溢出容器，或响应式断点错乱。
解决建议：
- 全局加 * { box-sizing: border-box; }，让 padding 和 border 都“挤进”设定的宽高中
- 若必须用 content-box（如某些 UI 库重置），计算总尺寸时得手动减去 padding
margin区域永远透明，padding区域显示背景
padding 在边框内侧，属于元素“可绘制范围”，所以背景色、背景图、圆角裁切都会覆盖它；margin 在边框外侧，纯透明，透出父容器或 body 的背景。
使用场景：
- 想让按钮文字离边框有呼吸感，同时保持蓝色背景延伸到边缘 → 用 padding
- 想在两个卡片之间留白，又不希望某张卡片的背景“吃掉”空白 → 用 margin
- 想让两个相邻块级元素的背景视觉上“连起来”，就得用负 margin 拉近，而不是靠 padding
垂直方向的margin会合并，padding不会
相邻块级元素的上下 margin（比如 p 和 h2）会自动合并：不是相加，而是取两者中较大的那个值。例如 margin-bottom: 30px + margin-top: 20px，最终间距只有 30px。
立即学习“前端免费学习笔记（深入）”；
而 padding 永远不会合并，它只作用于自身元素内部。
容易踩的坑：
- 误以为给每个段落设 margin-bottom: 16px 就能保证段间距恒为 16px，实际首尾或嵌套时可能失效
- 修复方式：统一只设 margin-bottom，或改用 display: inline-block / overflow: hidden 等触发 BFC 的写法来隔离合并
margin可以为负，padding不能
margin 支持负值，这是它实现特殊布局的关键能力：比如 margin-left: -10px 往左微调位置，margin: 0 auto 居中块级元素，或者用负 margin 抵消父容器的 padding。
padding 值必须 ≥ 0，设成负数会被浏览器直接忽略。
注意点：
- 负 margin 会把元素“拉出”正常文档流，可能遮挡其他内容，调试时 inspect 元素要特别留意 box 模型图里的 margin 区是否变红（表示溢出）
- 不要用负 padding 试图“缩进”内容——它无效，该用 text-indent 或 transform 等替代方案
真正难的不是记清区别，而是面对一个具体布局问题时，第一反应是问“我要调整的是内容与边框的距离，还是元素与邻居的距离”——答对这句，选 padding 还是 margin 就不会错。
