CSS边距与内边距的区别 | AI生成和翻译
以下是 CSS 中 margin 与 padding 的主要区别说明：
| 特性 | Margin（外边距） | Padding（内边距） |
|---|---|---|
| 位置 | 元素边框外侧 | 元素边框内侧 |
| 作用对象 | 元素之间的间距 | 元素内部空间（环绕内容区域） |
| 盒模型计算 | 不包含在元素 width/height 中（除非使用 box-sizing: border-box） |
默认计入 width/height（随 box-sizing 变化） |
| 背景渲染 | 不受背景颜色/图片影响 | 会显示背景颜色/图片 |
| 折叠效应 | 垂直方向外边距会折叠（取较大值） | 内边距永不折叠 |
| 负值设置 | 支持负值（如 margin: -10px） |
不支持负值（无效设置） |
| auto 值行为 | margin: auto 可实现水平居中 |
padding: auto 无效 |
| 视觉效果 | 将其他元素推远 | 扩大元素的可点击/可见区域 |
可视化盒模型
+-----------------------------+
| 外边距 |
| +-----------------+ |
| | 边框 | |
| | +-------------+ | |
| | | 内边距 | | |
| | | +-------+ | | |
| | | | 内容 | | | |
| | | +-------+ | | |
| | +-------------+ | |
| +-----------------+ |
+-----------------------------+
快速示例
.box {
width: 200px;
height: 100px;
background: lightblue;
border: 5px solid navy;
padding: 20px; /* 添加内部空间 → 内容区域显小 */
margin: 30px; /* 添加外部空间 → 推远其他元素 */
}
- Padding 使元素内部空间更“宽松”，同时扩展背景/边框区域
- Margin 在当前元素与相邻元素间创建间隔区域
典型应用场景
- 需要为按钮、卡片或容器内部增加空间（且希望背景覆盖该区域）时使用 padding
- 需要控制元素间间隔（如段落、列表项、网格项）时使用 margin
简而言之：
Padding = 内部空间（影响元素自身）
Margin = 外部空间（影响周边元素布局）