padding是内容与边框间的内空隙，属元素自身，影响宽高且可填色；margin是边框与外部元素间的外空隙，不属元素自身，不影响宽高、透明且可负值。
直接记住一句话：内容 → padding → border → margin，从里到外，顺序不能乱。
padding是“内容和边框之间的空隙”
它在边框里面，属于元素自己的一部分：
- 文字离边框有多远，靠它控制
- 设置了背景色或背景图，padding区域也会被填满
- 在默认盒模型（box-sizing: content-box）下，它会让元素实际更宽更高（比如 width: 100px + padding: 10px → 总宽120px）
- 不能设负值
margin是“边框和其他元素之间的空隙”
它在边框外面，不属于元素本身，只影响外部关系：
- 两个div之间要留多大距离，靠它调节
- 永远透明，不显示背景，也不受边框包围
- 不影响元素自身的宽高计算（width还是100px，哪怕 margin: 50px）
- 支持负值（可让元素重叠）
- 相邻块级元素的上下 margin 会合并（取较大值），这是常见“间距没生效”的原因
用一个真实例子对比看效果
假设有一个带红色边框、黄色背景的 div：
立即学习“前端免费学习笔记（深入）”；
- padding: 20px → 内容离边框20px，这20px也是黄色的
- margin: 20px → 整个带边框的盒子，离隔壁元素20px，这段空白是透明的，能看到后面的内容
基本上就这些。不复杂但容易忽略细节。
