正在加载...

CSS 盒模型

你已经会用边框、padding、margin 和 width。现在把它们放在一张图上。CSS 盒模型说：每个元素都是嵌套的一层层盒子——中间是 content，然后是 padding，再是 border，最外面是 margin。

四层结构

从里到外读这个盒子。

📊 盒模型各层

层	位置	日常作用
Content	中心	文字、图片和子元素住在这里；`width` / `height` 通常量的就是它
Padding	content 与 border 之间	内边距缓冲；背景通常会填满它
Border	环绕 padding	盒子画出来的边
Margin	border 外侧	把这个盒子和邻居分开的外边距

先只定 content 尺寸

没有 padding、没有 border 的单纯宽度，故事最清楚。

仅 content 宽度

css

.box-content {
width: 200px;
background-color: #ccfbf1;
}

加上 padding — 涂色区域变大

Padding 在 border 内侧。默认 content-box 模型下，padding 会加在 content 宽度的外侧，所以涂色盒子会变宽。

content 加 padding

css

.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* content 仍是 200px；padding 每侧再加 20px */

再加上 border — 又一层环

Border 包住 padding。在默认尺寸算法下，边框厚度也会加进 border 盒的外部尺寸。

content、padding 与 border

css

.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

四层一起写

Margin 不给背景上色；它只把邻居推开。

完整盒模型配方

css

.card {
width: 200px;          /* content */
padding: 16px;         /* 内边距 */
border: 2px solid #134e4a; /* 边 */
margin: 24px;          /* 外边距 */
background-color: #ecfdf5;
}

同样的 width，总尺寸却不同

两个盒子可以都写 width: 200px，但一旦加上 padding 和 border，观感会差很多。

对比裸盒与加了 padding 的盒子

css

.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* 两者都声称 width 200px；.padded 占的水平空间更大 */

记住默认规则

默认情况下（box-sizing: content-box），width 和 height 描述的是 content 盒。Padding 和 border 常常会让最终可见盒子更大。后面的课会讲 box-sizing: border-box，它会改这套算法。

自己动手

只用 width: 200px 和背景做 .box-content。
复制一份，加上 padding: 20px，看涂色区域变大。
再加粗边框，再次观察总尺寸。
加上 margin: 24px，确认邻居被推开，而背景不会填满那段空隙。
把 .bare 和 .padded 并排放 — 声明宽度相同，占地不同。

常见错误

以为 margin 属于背景填充（它在外侧，通常透明）
写了 width: 200px 却指望加了厚 padding 后 border 盒仍刚好 200px（content-box 下不是）
搞混层顺序（content → padding → border → margin）
把 outline 当成 border（另一套工具）
还没搞懂默认模型就跳到 border-box 习惯

小结

每个元素都有 content、padding、border、margin 四层
Padding 在 border 内侧；margin 在外侧
默认 width/height 量的是 content 盒
Padding 与 border 常常增大可见总尺寸
Margin 制造外侧间隔，不给填充上色
box-sizing（下一节专项课）可以改变宽度算法

🧠 测试您的知识

准备开始

测试您的知识

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

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

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

语言