margin在边框外控制元素间距，可正负值且会合并；padding在边框内增加内容距离，影响元素尺寸且背景延伸，口诀“内填padding，外空margin”。
在CSS中，margin 和 padding 都用于控制元素的间距，但它们作用的位置和效果完全不同。理解它们的区别对页面布局非常关键。
1. margin：元素外边距
margin 是指元素边框（border）之外的空间，用来控制元素与其他元素之间的距离。
- 属于元素的外部空间，不会影响内容区域大小
- 可以设置正值或负值，实现元素间的推开或重叠
- 相邻的上下 margin 会发生“外边距合并”现象
- 背景颜色或边框不会延伸到 margin 区域
2. padding：元素内边距
padding 是指元素内容（content）与边框（border）之间的空间，用来控制内容离边框的距离。
- 属于元素内部空间，会增加元素的实际占用尺寸
- 只能设置为正值
- 背景颜色、背景图会延伸到 padding 区域
- 常用于让文字不紧贴边框，提升可读性和美观性
3. 直观对比示例
假设有一个 div：
立即学习“前端免费学习笔记（深入）”；
div {
width: 200px;
padding: 20px;
border: 5px solid #000;
margin: 30px;
}
- 内容宽度：200px
- 总宽度（含内边距和边框）：200 + 20×2 + 5×2 = 250px
- 该元素在页面中与其他元素的间距是 30px（由 margin 决定）
4. 快速记忆方法
- margin → “m” 开头，像“外面”（外边距）
- padding → “p” 开头，像“填充”（往里填）
- 口诀：内填 padding，外空 margin
基本上就这些。只要记住：padding 在边框内，影响元素本身大小；margin 在边框外，影响元素之间位置。用多了自然就分清了。
