CSS: CSS 边距
CSS 中的边距分为两种：内边距（padding）和外边距（margin）。它们是控制元素"内部留白"和"外部间距"的关键属性。
边距属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
padding |
16px, 10px 20px, 10px 5px 15px 20px |
内边距（上右下左） |
padding-top/right/bottom/left |
16px, 5% |
单边内边距 |
margin |
20px, 0 auto, 10px 0 20px 0 |
外边距（上右下左） |
margin-top/right/bottom/left |
10px, auto |
单边外边距 |
auto |
margin: 0 auto |
块级元素水平居中 |
💡 margin 简写规则： 4 值（上右下左）→ 3 值（上+左右+下）→ 2 值（上下+左右）→ 1 值（四边相等）。
1. 内边距 padding
padding 是内容区域到边框之间的空间，相当于元素的"内留白"。
▶ 示例
HTML
<style>
.box {
padding: 20px; /* 四边都是20px */
background: #fff3e0;
border: 1px solid #ffb74d;
}
</style>
<div class="box">内边距20px，内容与边框之间有20px的留白空间</div>
(1) 可以分别设置四个方向
▶ 示例
HTML
<style>
.box {
padding-top: 10px;
/* 上内边距 */
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
background: #fce4ec;
border: 1px solid #e91e63;
}
</style>
<div class="box">四边内边距不同：上10px 右20px 下30px 左40px</div>
(2) padding 简写规则
💡 记忆口诀： padding/margin 简写从"上"开始顺时针——上 右 下 左。记不住就记"从12点钟方向顺时针转一圈"。两个值时分别是"上下 左右"。
CSS
/* 一个值：四边相同 */
padding: 20px;
/* 两个值：上下 左右 */
padding: 10px 20px;
/* 三个值：上 左右 下 */
padding: 10px 20px 30px;
/* 四个值：上 右 下 左（顺时针） */
padding: 10px 20px 30px 40px;
(3) padding 的常用场景
▶ 示例
HTML
<style>
/* 给按钮添加内边距，让它更大更好点 */
.button {
padding: 12px 24px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
}
/* 卡片内容的留白 */
.card {
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
/* 导航项的点按区域 */
.nav-item {
padding: 10px 16px;
background: #e8eaf6;
display: inline-block;
}
</style>
<button class="button">按钮</button>
<div class="card">卡片内容，内边距让文本与边框保持舒适距离</div>
<nav class="nav-item">导航项</nav>
(4) padding 的注意事项
📌 行内元素注意：
<span>、<a> 等行内元素的 padding 只在水平方向有效。如果你想让行内元素有完美的点击区域，可以设 display: inline-block。
- padding 区域会显示元素的背景颜色和背景图像
- padding 会使元素"变大"（除非使用
box-sizing: border-box） - 行内元素（如
<span>）的 padding 只在水平方向有效
2. 外边距 margin
margin 是元素边框外侧与其他元素之间的空间，相当于元素的"外交距"。
▶ 示例
HTML
<style>
.box {
margin: 20px; /* 四边都是20px */
background: #e8f5e9;
border: 1px solid #66bb6a;
padding: 10px;
}
</style>
<div class="box">外边距20px，与其他元素之间保持20px的间距</div>
(1) margin 简写规则
和 padding 完全一样：
CSS
margin: 20px; /* 四边相同 */
margin: 10px 20px; /* 上下 左右 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
(2) margin 的常用场景
▶ 示例
HTML
<style>
/* 页面居中 */
.container {
width: 1200px;
margin: 0 auto; /* 水平居中 */
background: #e3f2fd;
padding: 10px;
}
/* 元素之间的间距 */
.box {
margin-bottom: 20px; /* 与其他元素的间距 */
}
/* 标题下方的间距 */
h1 {
margin-bottom: 16px;
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<h1>一级标题</h1>
(3) margin: auto 实现居中
margin: 0 auto 可以让块级元素在父容器中水平居中：
▶ 示例
HTML
<style>
.box {
width: 400px; /* 必须指定宽度 */
margin: 0 auto; /* 水平居中 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
3. 外边距合并（Margin Collapse）
⚠️ 经典坑： 垂直方向相邻的两个外边距会合并为较大的那个，这叫"外边距合并"（Margin Collapse）。最简单解决方法是给父元素加
overflow: hidden 或 padding: 1px。放入 flex 容器也能避免。
这是 CSS 中一个重要的概念——垂直方向上相邻的两个外边距会合并为一个，取其中的较大值。
(1) 场景一：相邻兄弟元素
▶ 示例
HTML
<style>
.box1 {
margin-bottom: 30px;
/* 下外边距 */
}
.box2 {
margin-top: 20px;
/* 上外边距 */
}
/* 实际间距是 30px（取较大值），而不是 50px */
</style>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
(2) 场景二：父子元素
当父元素没有 padding、border 或内容时，子元素的 margin 会"穿透"到父元素外部：
▶ 示例
HTML
<style>
.parent {
background: #eee;
/* 没有 padding 或 border */
}
.child {
margin-top: 20px; /* 这个 margin 会让父元素也"下沉" */
}
</style>
<div class="parent">父容器元素</div>
<div class="child">子元素内容</div>
避免方法：
- 给父元素加
padding: 1px（或者任意正值） - 给父元素加
border: 1px solid transparent - 给父元素加
overflow: hidden - 使用 flex 或 grid 布局
(3) 场景三：空元素
一个没有内容、padding、border 的块级元素，它的上下 margin 也会合并。
(4) 不会合并的情况
- 水平方向（左右 margin）不会合并
- flex 布局的子项不会合并
- 浮动元素不会合并
- 绝对定位元素不会合并
4. padding vs margin 的选择
| 场景 | 用哪个 |
|---|---|
| 让按钮文字不贴边 | padding |
| 让两个卡片保持距离 | margin |
| 让内容与边框有距离 | padding |
| 让容器在页面居中 | margin: auto |
| 背景区域的大小控制 | padding |
一个简单判断方法：background 是否应该覆盖这个区域？ 如果应该，用 padding；如果不应该，用 margin。
❓ 常见问题
Q margin 塌陷（Margin Collapse）是什么？
A 垂直方向上相邻的两个外边距会合并为较大的那个，这叫外边距塌陷。比如一个元素
margin-bottom: 30px，下一个元素 margin-top: 20px，实际间距是 30px 不是 50px。给父容器加 overflow: hidden 或改 flex 布局都能避免。Q padding 会撑大元素怎么办？
A 全局设置
box-sizing: border-box。这样 padding 和 border 会包含在元素的总宽高中，不会撑大。几乎所有现代项目都会做这个设置。Q margin: 0 auto 居中需要什么条件？
A 元素必须有明确的宽度（不能是 auto），且必须是块级元素（display: block）。行内元素和没有设置宽度的块级元素无法用 margin: auto 居中。
📖 小节
- padding 和 margin 是 CSS 布局中最常用的两个间距属性
- padding 控制元素内部的留白，margin 控制元素外部的间距
- 理解它们的简写规则、以及外边距合并（Margin Collapse）这个"坑"，是写出可靠布局的必备知识
- 建议在项目开始时就全局设置
box-sizing: border-box，这样 padding 不会撑大元素，计算尺寸更方便
📝 作业
- 创建一个"卡片组"页面，包含 3 张卡片，使用 margin 控制卡片之间的间距。
- 创建一个导航栏，使用 padding 控制每个导航项内部的文字与边界的距离。
- 演示"外边距合并"现象，并在代码中用至少两种方法解决它。
- 使用
margin: 0 auto让一个 800px 宽的容器在页面中水平居中。
