正在加载...

CSS 外边距

你会给盒子上色、描边、圆角。下一步：把盒子推开。margin 是元素周围的外侧空隙——边框外面的透气空间。

什么是 margin？

Margin 是元素边框外侧的空白。它把一个盒子和邻居分开。它不会把元素的背景画进这段空隙——空隙在填充区域之外。

Margin 与 padding（快速对比）

Padding（下一课）在边框里面——内容与边缘之间。Margin 在边框外面——这个盒子与下一个之间。今天只记一行：margin = 外，padding = 内。

简写：几个值？

可以写一个、两个、三个或四个长度。边的顺序固定。

📊 margin 简写取值个数

取值 含义 日常说明
1 四边相同 卡片四周均匀透气
2 上下，然后左右 垂直与水平配对
3 上，左右，下 较少见——知道存在即可
4 上、右、下、左 完全控制，从上顺时针

每边相同间距

从四边同一长度开始。

四边相同 margin

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

两个值 — 先垂直后水平

两个长度配对对边：先是上下；再是左右。

先垂直后水平的 margin

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

四个值 — 从上顺时针

每边需要各自空隙时：上 → 右 → 下 → 左。

四边 margin 简写

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

用 auto 居中块

对有固定宽度的块级盒子，margin-left: auto 与 margin-right: auto（常写 margin: 0 auto）把剩余空间均分到两侧——水平居中的经典做法。

用 auto 水平居中

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

垂直外边距可能折叠

两个块级元素堆叠时，第一个的下外边距与第二个的上外边距常常折叠（collapse）成一段空隙——通常取两者较大者，不是相加。初学者容易吃惊；在堆叠段落和区块之间要有这个预期。

堆叠块与 margin 折叠

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* 它们之间你常看到大约 24px，不是 48px */

一次只设一边

像 margin-top 这样的完整写法，适合只在标题上方或按钮下方加点空间。

仅上外边距

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

自己试试

  1. 给两张卡片 margin: 16px，观察外侧空隙。
  2. 把一张改成 margin: 24px 12px，对比垂直与水平。
  3. 用 margin: 0 auto 居中 280px 宽的盒子。
  4. 用都是 24px 的 margin-bottom 与 margin-top 堆两个色块——空隙像 24 还是 48？
  5. 只用 margin-top 给标题留空。

常见错误

  • 本意是 padding（文字内侧缓冲）却用了 margin
  • 以为 margin: auto 会像简单块一样居中每一个 flex/grid 项（布局上下文很重要）
  • 加上、下外边距并假定总是相加（折叠可能缩小空隙）
  • 到处用巨大 margin，而不是小而一致的尺度
  • 搞混四个值的顺序（上、右、下、左）

小结

  • Margin 是边框外的外侧空间
  • 简写：1、2 或 4 个值（四个从上顺时针）
  • margin: 0 auto 水平居中有宽度的块
  • 堆叠块之间的垂直外边距可能折叠
  • 只需要一边时用完整写法
  • Padding 是内侧表亲——下一课

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
9
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程