html中margin的用法

在 HTML 页面布局中，margin 是 CSS 中用于设置 元素与元素之间的外边距（即元素外部的空白区域） 的属性。

它可以单独设置四个方向的边距：上（top）、右（right）、下（bottom）和左（left）。

---

一、基本语法

selector {
  margin: 值;
}

示例：

div {
  margin: 20px;
}

这表示四个方向的外边距都是 20 像素。

---

二、四种写法详解

1. 单值写法（四个方向统一边距）

margin: 10px;

表示：上右下左 都是 10px

---

2. 双值写法（上下 和 左右）

margin: 10px 20px;

表示：

• 上下：10px
• 左右：20px

---

3. 三值写法（上 左右 下）

margin: 10px 15px 20px;

表示：

• 上：10px
• 左右：15px
• 下：20px

---

4. 四值写法（上 右 下 左）

margin: 5px 10px 15px 20px;

表示：

• 上：5px
• 右：10px
• 下：15px
• 左：20px

---

三、单独设置某个方向的 margin

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

---

四、常见值类型

• px：像素（常用）
• %：相对于父元素的宽度（常用于响应式）
• auto：自动（可居中元素）
• em/rem：相对字体大小的单位

居中元素的常见写法：

div {
  width: 300px;
  margin: 0 auto;
}

表示上下边距为 0，左右自动分配（常用于居中块级元素）

---

五、注意事项

• margin 只影响元素之间的空隙，不影响元素自身的内容区域。
• margin 合并（margin collapsing）：垂直方向相邻的块级元素的 margin 可能会发生合并（取两者较大值）。

---