A04 盒模型

摘要：元素在页面上占多大空间，由内容、内边距、边框、外边距四层叠加决定。默认的 content-box 会让「宽度 + 内边距」超出预期，这是布局错位最常被忽略的原因。本文给出四层关系图、两种盒模型的计算差异，以及三条尺寸写法。
关键词：盒模型，内边距，边框，外边距，border-box

所属：frontend/css / A-入门 ｜ 上一篇：A03-颜色与文字排版 ｜ 下一篇：A05-文档流与display

1 引言

给一个盒子设 width: 300px; padding: 20px; border: 1px，它实际占据的宽度是 342 像素。多数「对齐不上」「换行提前」的问题，根源都在这里。

本文把四层空间拆开计算，并给出统一写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
尺寸	width、height、min/max 系列	容器查询单位（C01）
四层	内容、内边距、边框、外边距	阴影与滤镜
盒模型	content-box 与 border-box	表格与替换元素的特殊规则

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/box.html	编码 UTF-8
浏览器	Chrome 130+，盒模型高亮可用	元素面板可切换高亮
前置	A02	会选择器

3 原理与实现

3.1 四层空间

一个元素的最终占位由四个同心区域叠加而成，如图 3-1 所示。

flowchart TD
    M["外边距 margin<br/>元素之间的空隙"] --> B["边框 border<br/>可见边界"]
    B --> P["内边距 padding<br/>内容与边界的距离"]
    P --> C["内容 content<br/>文字与图片"]

图 3-1 盒模型的四个区域与顺序

图上可见：width 默认只约束内容区，内边距与边框会向外叠加，这就是 300 像素盒子的实际宽度变成 342 的原因。

3.2 两种盒模型

/* 运行环境：Chrome 130+；css-practice/box.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #cbd5e1;
  margin-block-end: 1rem;
  background: #f8fafc;
}

.card--content-box {
  box-sizing: content-box; /* 仅用于对比 */
}

<!-- 两个卡片并排对比实际宽度 -->
<div class="card">border-box：总宽 300px</div>
<div class="card card--content-box">content-box：总宽 342px</div>

两种盒模型的计算差异见表 3-1。

项	content-box（默认）	border-box（推荐）
width 约束	仅内容区	内容 + 内边距 + 边框
实际总宽	width + padding + border	等于 width
常见后果	加内边距后撑破布局	尺寸可控
建议	仅个别场景	全局统一设置

尺寸相关属性见表 3-2。

属性	作用	常见误用
width / height	显式尺寸	给内容高度不定的元素写死 height
min-width / max-width	下限与上限	只写 max-width 却不写 100%
padding	内边距，可四向分别设置	用 padding 制造元素间距
margin	外边距，相邻块级元素会合并	用 margin 做内边距
margin-block / margin-inline	逻辑方向内外边距	混用物理方向导致方向适配失败

三条规则：全局设置 border-box；元素间距用 margin，内容与边界距离用 padding；不写固定 height，改用 min-height 与内边距撑开。

4 验证与讨论

1. 打开页面，用元素面板高亮两个卡片，对比实际宽度 300 与 342。
2. 给 .card 增加 padding: 40px，观察 border-box 卡片总宽不变、内容变窄。
3. 把 .card--content-box 的 box-sizing 改为继承全局值，两卡片宽度一致。
4. 检查两个卡片之间的垂直间距，确认是 margin 合并后的结果而非相加。

检查项	预期结果	说明
总宽差异	342 与 300 像素	盒模型不同
高亮四层	面板显示 margin/border/padding/content	直观确认层次
间距合并	相邻外边距取较大值	块级元素的合并规则

讨论与局限。 垂直方向的相邻外边距会合并，水平方向不会；弹性布局的项不合并。另 height: 100% 需要父元素有确定高度才生效，这是「高度设了没用」的常见原因。

5 常见问题

现象	原因	处理
加内边距后布局被撑破	仍为默认盒模型	全局设置 border-box
元素间距比设定值大	相邻外边距合并	改用单一侧间距，或用 gap
height: 100% 无效	父元素高度不确定	父级给确定高度，或改用 flex 拉伸
内容溢出容器	固定高度 + 内容超出	改 min-height 或 overflow
图片撑宽容器	未限制最大宽度	max-width: 100%

6 结论

序号	结论	依据
1	元素占位由四层叠加	图 3-1
2	全局使用 border-box 让尺寸可预测	表 3-1
3	间距用 margin，内距用 padding	表 3-2
4	垂直外边距会合并	4 节步骤 4

• 上一篇：A03-颜色与文字排版
• 下一篇：A05-文档流与display
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · 盒模型，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_box_model（访问于 2026-10-31）
[2] CSS Box Sizing Module Level 3，W3C，https://www.w3.org/TR/css-sizing-3/（访问于 2026-10-31）