margin用于控制元素外边距，提升页面布局清晰度；支持四方向设置或统一设置，可使用px、%、auto等值；通过margin: 0 auto可实现块级元素水平居中；需注意垂直方向相邻元素的margin合并问题，常取较大值，可通过设置单边margin、添加border或触发bfc避免。
在网页布局中，margin 属性用于控制元素周围的空白区域，也就是外边距。合理使用 margin 可以让页面结构更清晰、元素之间更有层次感。下面介绍 margin 的基本语法和常见应用方法。
margin 基本语法
margin 可以单独设置四个方向，也可以统一设置。支持长度值（如 px、em）、百分比（%）或 auto。
常用写法：- margin: 10px; — 四个方向均为 10px
- margin: 10px 20px; — 上下为 10px，左右为 20px
- margin: 10px 20px 30px; — 上：10px，右：20px，下：30px，左：自动对称
- margin: 10px 20px 30px 40px; — 顺时针：上、右、下、左
单独设置方向外边距
如果只想调整某一侧的外边距，可以使用以下属性：
- margin-top: 设置上外边距
- margin-right: 设置右外边距
- margin-bottom: 设置下外边距
- margin-left: 设置左外边距
div {
margin-top: 20px;
margin-left: 15px;
}margin 的 auto 值实现居中
当设置一个块级元素的宽度后，使用 margin: 0 auto; 可使其在父容器中水平居中。
立即学习“前端免费学习笔记（深入）”；
示例：.container {
width: 80%;
margin: 0 auto; /* 水平居中 */
background-color: #f0f0f0;
}注意：inline 元素或未设置宽度的 block 元素无法通过此方式居中。
margin 合并问题（Margin Collapse）
在垂直方向上，相邻两个块级元素的 margin 会发生“合并”，取其中较大的那个值作为实际间距。
常见情况：- 两个上下相邻的 div，分别设置 margin-bottom 和 margin-top，最终间距不是相加，而是取最大值
- 父元素与第一个子元素的上边距也可能发生合并
- 只给其中一个元素设置 margin
- 使用 padding 或 border 分隔
- 改变元素的 BFC（块格式化上下文）状态，如添加 overflow: hidden
基本上就这些。掌握 margin 的设置方式，能有效提升页面排版的灵活性和美观度。
