在 HTML 页面布局中，margin 是 CSS 中用于设置 元素与元素之间的外边距（即元素外部的空白区域） 的属性。
它可以单独设置四个方向的边距：上（top）、右（right）、下（bottom）和左（left）。
一、基本语法
css
selector {
margin: 值;
}示例：
css
div {
margin: 20px;
}这表示四个方向的外边距都是 20 像素。
二、四种写法详解
1. 单值写法（四个方向统一边距）
css
margin: 10px;表示：上右下左 都是 10px
2. 双值写法（上下 和 左右）
css
margin: 10px 20px;表示：
- 上下：10px
- 左右：20px
3. 三值写法（上 左右 下）
css
margin: 10px 15px 20px;表示：
- 上：10px
- 左右：15px
- 下：20px
4. 四值写法（上 右 下 左）
css
margin: 5px 10px 15px 20px;表示：
- 上：5px
- 右：10px
- 下：15px
- 左：20px
三、单独设置某个方向的 margin
css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;四、常见值类型
px：像素（常用）%：相对于父元素的宽度（常用于响应式）auto：自动（可居中元素）em/rem：相对字体大小的单位
居中元素的常见写法：
css
div {
width: 300px;
margin: 0 auto;
}表示上下边距为 0，左右自动分配（常用于居中块级元素）
五、注意事项
margin只影响元素之间的空隙，不影响元素自身的内容区域。- margin 合并（margin collapsing）：垂直方向相邻的块级元素的 margin 可能会发生合并（取两者较大值）。