1 《CSS盒子模型进阶：padding 与 margin 布局机制详解》
1.1 盒子模型核心概念
- 1.1.1 本质定义
👉 页面中所有元素都可以看成一个“盒子”
- 1.1.2 组成结构
内容（content）
内边距（padding）
边框（border）
外边距（margin）
- 1.1.3 核心理解
👉 盒子大小 =
content + padding + border
（⚠️ margin 不参与盒子大小计算）
2 padding（内边距）
2.1 作用
👉 控制内容与边框之间的距离
2.2 基本写法
div {
padding: 20px;
}
2.3 四方向写法（重点）
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
2.4 简写规则（高频）
padding: 10px; /* 四个方向 /
padding: 10px 20px; / 上下 左右 /
padding: 10px 20px 30px; / 上 左右 下 /
padding: 10px 20px 30px 40px; / 上 右 下 左 */
👉 顺时针：上 → 右 → 下 → 左
2.5 重要特性
- 会撑大盒子
- 会影响布局
2.6 示例
div {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid red;
}
👉 实际大小：
宽 = 200 + 40 + 10 = 250px
高 = 200 + 40 + 10 = 250px
3 margin（外边距）
3.1 作用
👉 控制元素与元素之间的距离
3.2 基本写法
div {
margin: 20px;
}
3.3 四方向写法
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
3.4 简写规则（和padding一样）
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
3.5 居中（高频）
div {
margin: 0 auto;
}
👉 条件：
- 必须是块元素
- 必须设置宽度
3.6 重要特性
- 不影响盒子本身大小
- 只影响“位置”
4 margin塌陷（重点难点）
4.1 什么是塌陷
👉 两个垂直方向的 margin 会合并
4.2 示例
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 30px;
}
👉 实际间距：
不是 80px，而是 50px
👉 取较大值
4.3 父子塌陷（更重要）
.parent {
margin-top: 50px;
}
.child {
margin-top: 30px;
}
👉 子元素的 margin 会“跑到外面”
4.4 解决方案（必须会）
- 方式1：加 padding
.parent {
padding-top: 1px;
}
- 方式2：加 border
.parent {
border-top: 1px solid transparent;
}
5 padding vs margin（核心对比）
5.1 本质区别
| 属性 | 控制什么 | 是否影响大小 |
|---|---|---|
| padding | 内部间距 | ✔ |
| margin | 外部间距 | ❌ |
5.2 使用场景
- padding：让内容不贴边
- margin：拉开元素距离
6 本章核心总结（必须掌握）
6.1 三个关键点
- padding 会撑大盒子
- margin 控制间距
- margin 会塌陷
6.2 高频操作
- 居中：
margin: 0 auto; - 内边距：
padding: 20px; - 快速布局：padding + margin 配合
6.3 一句话总结
👉 padding 控内部，margin 控外部
6.4 你这一章的掌握标准
如果你能做到👇：
- 能算盒子真实大小
- 会用 margin 居中
- 知道塌陷怎么解决
👉 说明你已经具备“写布局”的核心能力了