掌握 margin 的方向设置、auto 行为和折叠特性可灵活控制元素间距，通过 margin 调整块级元素垂直距离，使用 margin: 0 auto 实现水平居中，并注意相邻元素间 margin 折叠问题及解决方案。
在网页布局中，调整元素之间的间距是常见需求。CSS 的 margin 属性是控制元素外边距的核心工具，能有效实现元素之间的空白区域分配。合理使用 margin，可以让页面结构更清晰、视觉更舒适。
理解 margin 的基本作用
margin 定义元素边框（border）之外的透明区域，它不占据元素本身的尺寸，但会影响元素与其他元素之间的距离。margin 可以设置为正值、负值或自动，支持上下左右独立控制。
常用写法包括：
- margin: 10px; —— 四个方向均为 10px
- margin: 10px 20px; —— 上下 10px，左右 20px
- margin: 10px 20px 30px; —— 上 10px，左右 20px，下 30px
- margin: 10px 20px 30px 40px; —— 顺时针：上右下左
通过 margin 调整块级元素垂直间距
块级元素默认垂直排列，使用 margin-top 和 margin-bottom 可控制它们之间的垂直间隔。
立即学习“前端免费学习笔记（深入）”；
例如两个相邻段落：
p {
margin-bottom: 20px;
}
p:last-child {
margin-bottom: 0;
}
这样每个段落后留出 20px 间距，最后一个元素去除底部空白，避免多余留白。
水平居中与 auto margin 技巧
对块级元素设置固定宽度后，使用 margin: 0 auto 可实现水平居中。
.container {
width: 80%;
margin: 0 auto; /* 水平居中 */
}
此时左右 margin 自动均分剩余空间，使容器在父元素中居中显示。
注意 margin 合并问题
在块级元素垂直布局中，相邻元素的上下 margin 有时会合并为一个 margin，取较大者。这称为“margin 折叠”。
例如：
实际间距为 30px，而非 50px。可通过以下方式避免：
- 只给其中一个元素设置 margin
- 使用 padding 或 border 隔断
- 改变元素的 BFC（块格式化上下文）状态，如设置 overflow: hidden
基本上就这些。掌握 margin 的方向设置、auto 行为和折叠特性，就能灵活控制页面元素的间距。不复杂但容易忽略细节。
