margin是外边距，位于边框外控制元素间距，不影响背景；padding是内边距，位于边框内增加内容间隔，显示背景色。二者在盒模型中依次为内容、padding、边框、margin，常用于布局 spacing 与内部留白。
在CSS布局中，margin 和 padding 是两个基础但非常重要的盒模型属性，它们控制元素周围的空白区域，但作用位置和效果完全不同。
1. 定义与位置区别
margin 指元素边框（border）外的透明区域，用于控制元素与其他元素之间的距离。它位于边框之外，不会影响元素内容本身，只影响外部布局。
padding 指元素边框内的透明区域，也就是内容（content）到边框之间的空间。它属于元素内部的一部分，会影响元素整体大小（尤其是在设置了背景色或边框时）。
简单记忆：margin 是“外边距”，padding 是“内边距”。
立即学习“前端免费学习笔记（深入）”；
2. 对背景和边框的影响
padding 区域会显示元素的背景色或背景图像，因为它属于元素内部。如果你给一个 div 设置了 background-color: #eee，那么 padding 部分也会是灰色。
margin 区域始终是透明的，不会显示背景。无论你设置多大的 margin，它都不会继承背景样式，也不会遮挡其他元素的背景。
- padding 被背景“填充”
- margin 是“空的”，不参与视觉渲染
3. 盒模型中的位置关系
从内到外，标准盒模型的结构如下：
- 内容（Content）
- 内边距（Padding）
- 边框（Border）
- 外边距（Margin）
例如：一个宽度为 200px 的 div，如果设置了 padding: 20px，则实际占用的宽度变为 240px（假设 border-box 未启用）。而 margin: 20px 不计入元素自身尺寸，但会影响与其他元素的间距。
4. 常见使用场景
使用 padding 的典型情况包括：
- 让文字离边框有一定距离，提升可读性
- 按钮内部留白，使点击区域更舒适
- 容器内容不贴边
使用 margin 的典型情况包括：
- 两个段落之间添加垂直间距
- 居中块级元素（如 margin: 0 auto）
- 避免元素紧贴在一起造成视觉拥挤
基本上就这些。理解 margin 和 padding 的核心在于记住它们的位置：一个在外，一个在内。掌握这一点，布局时就能更准确地控制元素间的距离和内部空间。不复杂但容易忽略细节。
