菜鸟-创作你的创作

CSS基础:margin属性4种值类型,4个写法规则详解

lichongyang

下面给你一篇 《CSS 基础：margin 属性 4 种值类型 & 4 个写法规则详解》，
从 0 讲起 + 配图式理解 + 面试不丢分，小白也能一次看懂。

一、margin 是什么？

margin = 外边距
👉 控制 元素与元素之间的距离

┌───────────────┐
│   margin      │  ← 外边距
│ ┌───────────┐ │
│ │ border    │ │
│ │ ┌───────┐ │ │
│ │ │padding│ │ │
│ │ │ content│ │ │
│ │ └───────┘ │ │
│ └───────────┘ │
└───────────────┘

二、margin 支持的 4 种值类型（重点）

1️⃣ 长度值（最常用）

margin: 10px;
margin: 1em;
margin: 2rem;

常见单位

单位说明
px固定像素（最常用）
em相对父元素字体大小
rem相对根元素字体大小
%相对父元素宽度

📌 注意：
上下 margin 的 % 也是相对宽度，不是高度（面试点）

2️⃣ 百分比值 %

margin: 10%;

📌 计算规则：

相对于父元素的宽度

.parent {
  width: 200px;
}
.child {
  margin: 10%; /* = 20px */
}

3️⃣ auto（自动）

margin: auto;

最经典用法：水平居中

.box {
  width: 200px;
  margin: 0 auto;
}

📌 条件：

4️⃣ 负值（负边距）

margin-left: -20px;

📌 作用：

.box {
  margin-top: -10px;
}

⚠ 常用于：

三、margin 的 4 种写法规则（重点 ⭐）

1️⃣ 一个值（4 个方向一样）

margin: 20px;

等价于：

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

📌 口诀：
👉 上下左右都一样

2️⃣ 两个值（上下 / 左右）

margin: 10px 20px;

等价于：

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

📌 口诀：
👉 上下 | 左右

3️⃣ 三个值（上 / 左右 / 下）

margin: 10px 20px 30px;

等价于：

margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 30px;

📌 口诀：
👉 上 | 左右 | 下

4️⃣ 四个值（顺时针）

margin: 10px 20px 30px 40px;

等价于：

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

📌 口诀（必背）：

上 → 右 → 下 → 左（顺时针）

四、单方向写法（补充）

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

📌 优点：

五、margin 常见“坑点”（面试高频）

1️⃣ 外边距塌陷（margin collapse）

<div class="box1"></div>
<div class="box2"></div>


.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }

👉 实际间距是 30px，不是 50px ❗

解决方式

overflow: hidden;


display: flex;


padding-top: 1px;

2️⃣ margin 不会撑开父元素

.parent {
  border: 1px solid red;
}
.child {
  margin-top: 20px;
}

👉 父元素不会被撑高
（padding 会）

3️⃣ margin: auto 不能垂直居中

❌

margin: auto;

只能 水平居中

垂直居中要用：

六、记忆口诀（送你一套）

写法规则口诀

1 值：全一样
2 值：上下 左右
3 值：上 左右 下
4 值：上右下左

百分比规则

margin 百分比，全看父宽度

七、面试一句话总结

margin 用于控制元素外边距，支持长度、百分比、auto 和负值；简写规则遵循顺时针，上右下左；百分比始终基于父元素宽度。

退出移动版