3.1 盒模型原理与属性

盒模型原理与属性

本节摘要：浏览器渲染页面时把每个 HTML 元素都看作一个矩形盒子，盒子由内容、内边距、边框、外边距四层组成。本节逐层拆解四层的职责与语法，动手验证背景延伸范围和简写规则，最后直面盒模型最反直觉的行为——垂直外边距合并不叠加而是取较大值。

学习目标

完成本节后，你将能够：画出盒模型的四层结构并解释每层的作用；使用 width、height、padding、border、margin 精确控制元素的空间占位；解释背景色延伸到哪一层；复现外边距合并的三种情形并知道如何应对。

盒模型的四层

从内到外，盒模型的四层分别是：

**内容区（content）**是元素实际内容所在的区域。文本、图片、子元素都排列在这里。width 和 height 属性控制内容区的尺寸。

**内边距（padding）**是内容区和边框之间的透明空间。内边距的背景色就是元素的背景色——所以如果你给元素设置了背景，背景会延伸到内边距区域。

**边框（border）**是内边距和外边距之间的可见边界线。边框有宽度、样式（实线、虚线、双线等）和颜色三个属性。

**外边距（margin）**是盒子最外层的透明空间，用于与其他元素保持距离。外边距没有背景色——即使你设置了背景，也不会延伸到外边距区域。

.card {
  /* 内容区尺寸 */
  width: 300px;
  height: 200px;

  /* 内边距：四个方向可以分别设置 */
  padding: 16px;               /* 四个方向都是 16px */
  padding: 16px 24px;          /* 上下 16px，左右 24px */
  padding: 8px 16px 12px 20px; /* 上 右 下 左（顺时针） */

  /* 边框 */
  border: 1px solid #ddd;      /* 宽度 样式 颜色 */
  border-radius: 8px;          /* 圆角 */

  /* 外边距 */
  margin: 20px auto;           /* 上下 20px，左右自动（水平居中） */
}
​

盒模型四层关系与背景的延伸范围

背景延伸范围是四层结构里最值得动手验证的一条。做这个实验：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #1565C0;
  margin: 30px;
  background-color: #FFF9C4;
}
​

刷新页面看结果：黄色背景填满了内容区和内边距，蓝色边框圈在外面，而最外圈 30px 的外边距完全透明，露出页面底色。再加一句 background-clip: content-box，黄色立刻缩回到只剩内容区——背景裁剪属性可以改变"背景铺到哪"，默认铺到边框内侧。

内边距详解

内边距可以是固定像素值、百分比或相对字号单位。百分比值是相对于父元素的宽度计算的——这包括垂直方向的内边距，是盒模型里著名的"意外"，但也成就了一个经典技巧：想做一个"宽高恒等的正方形"，width: 50%; padding-top: 50% 即可，两个百分比参照同一个宽度，天然同步。

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* 简写形式 */
.box {
  padding: 10px 20px;  /* 上下 左右 */
}
​

简写的记忆口诀是"顺时针、由疏到密"：一个值管四边；两个值是上下、左右；三个值是上、左右、下；四个值从上开始顺时针转一圈。margin 的简写规则与 padding 完全一致，学一套会两套。

内边距的一个常见用途是在按钮中为文字提供"呼吸空间"：

.btn {
  padding: 10px 24px;
  background-color: #1976D2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
​

试着把 padding 删掉再刷新——按钮里的文字紧贴边缘，立刻显得廉价。合适的内边距是界面"质感"最便宜的来源，一个经验起点是水平内边距约为垂直内边距的 1.5 倍。

边框详解

边框由三个属性共同决定：border-width（宽度）、border-style（样式）和 border-color（颜色）。其中 border-style 是唯一不能省略的——没有样式的边框不会显示，哪怕你设了宽度和颜色。

/* 四条边可以有不同的边框样式 */
.box {
  border-top: 3px solid #1976D2;
  border-right: 1px dashed #ccc;
  border-bottom: 2px double #333;
  border-left: 4px dotted #F44336;
}
​

日常界面里最常用的边框手法其实是"单边强调"：只在左侧或顶部画一条有色边线，配合浅色背景做成引用块、提示框：

.callout {
  border-left: 4px solid #1565C0;
  background: #E3F2FD;
  padding: 12px 16px;
  border-radius: 0 4px 4px 0; /* 只圆右侧两个角 */
}
​

border-radius 属性让边框的角变成圆角。它接受一个长度值，值越大圆角越明显：

/* 圆形按钮（宽高相等时） */
.circle-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;  /* 50% 使其变成正圆 */
}

/* 胶囊形按钮（圆角大于高度的一半） */
.pill-btn {
  border-radius: 999px;
}
​

还有一个进阶小技巧：border 配合透明色可以画三角形——把宽度设大、三条边着透明色，剩下那条边的形状就成了箭头，常用于气泡提示的尖角。原理是边框在交角处天然呈斜切划分，这里埋个种子，有兴趣可以自己调参数玩。

外边距与合并

外边距控制元素与其他元素之间的距离。它有一个值得特别注意的行为：外边距合并（margin collapsing）。

当两个块级元素在垂直方向上相邻时，上方元素的下外边距和下方元素的上外边距不会叠加，而是合并为一个外边距，取两者中的较大值。

.heading { margin-bottom: 30px; }
.paragraph { margin-top: 20px; }
​

<h1 class="heading">标题</h1>
<p class="paragraph">段落</p>
​

你可能期望标题和段落之间的间距是 30px + 20px = 50px，但实际上只有 30px——两个外边距合并了，取较大值。动手把 paragraph 的 margin-top 从 20 改成 50，间距变成 50（换了较大的赢家）；再改成 10，间距仍是 30。这就是"取大不叠加"的现场证据。

外边距合并有三种情形：

垂直相邻的兄弟元素：上面例子中的情况。注意只发生在垂直方向，水平方向的外边距不会合并（在标准流里水平排布的场景本身也少见，第 4 章的 Flex 布局里水平间距也不合并）。

父元素的顶部/底部：如果父元素没有上边框或上内边距，第一个子元素的上外边距会"穿透"父元素，出现在父元素的上方。这是"内容顶端间距莫名跑到外面去了"的头号原因。

空元素：如果一个块级元素没有内容、没有内边距、没有边框，它的上外边距和下外边距会合并成一个。

/* 防止父子外边距合并的方法 */
.parent {
  padding-top: 1px;                    /* 方法一：添加上内边距 */
  border-top: 1px solid transparent;   /* 方法二：添加透明边框 */
  overflow: auto;                      /* 方法三：创建 BFC */
  display: flow-root;                  /* 方法四：现代且语义化的 BFC */
}
​

第三、四种方法都指向同一个概念——BFC（块格式化上下文）：一个独立的渲染王国，王国里面的外边距不与外面合并。BFC 的更多妙用（包含浮动、阻止环绕）在第 4 章 Float 一节展开，这里先记住它是"隔离带"。

动手做：个人主页的文章卡片

把四层结构组装成真实组件。给个人主页加一张文章卡片：

<article class="post-card">
  <h3>盒模型学习笔记</h3>
  <p>今天终于搞懂了 padding 和 margin 的区别……</p>
  <a class="read-more" href="#">阅读全文</a>
</article>
​

.post-card {
  width: 320px;
  padding: 20px 24px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  margin: 24px auto;      /* 垂直间距 + 水平居中 */
  background: #fff;
}

.post-card h3 {
  margin: 0 0 8px;         /* 手动清掉标题默认外边距，间距自己管 */
}

.post-card p {
  margin: 0 0 16px;
  color: #555;
  line-height: 1.6;
}

.read-more {
  display: inline-block;
  padding: 8px 16px;
  background: #1565C0;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
​

写完做三个"审问式"检查：用开发者工具量一下卡片总宽度——320（内容）+ 24×2（内边距）+ 1×2（边框）= 370px，外边距不算在内；故意在卡片后紧跟再放一张卡片，两张卡的 margin: 24px 合并成 24px 而不是 48px；给第一张卡内部的 h3 恢复浏览器默认外边距，看到它把父元素顶部"顶"出一段空白——父子合并现行。三问三答，四层结构就真正属于你了。

盒模型相关属性速查

表格末尾的 box-shadow 值得一提：阴影不占布局空间，画在盒子外面，多层阴影叠加能做出立体感；outline 同样不影响布局，是聚焦提示的常用选择（不撑大元素）。

💡 动手建议：在浏览器中打开任意一个网页，用开发者工具选中一个元素，观察盒模型示意图中四层的数值。然后尝试在 Styles 面板中实时修改这些值，观察页面变化。特别是试试给一个元素加 margin: 0 auto——水平居中这个最常用的外边距技巧，五秒钟就能记住。

⚠️ 外边距合并只发生在垂直方向的块级元素之间。Flex 和 Grid 容器中的子元素不会发生外边距合并——这是 Flexbox 和 Grid 比传统布局更"可预测"的原因之一，也是第 4 章你会爱上它们的理由之一。

图：外边距合并——取较大值而非叠加

常见疑问解答

问：外边距合并有没有"正面用法"？ 有，而且很经典。文章排版里给段落统一设 margin: 0 0 1em，首段与父容器顶部之间不会凭空多出一段——首段的上边距是零，无从合并；两段之间自动得到一个行距，不必担心"下边距加上边距"翻倍。合并机制天然适配"间距只算一次"的排版直觉，古人设计它不是存心添乱。

问：圆角设了怎么没效果？ 三个常见原因：边框和背景都没有——圆角是"裁剪"边框和背景的，两者皆无时视觉上看不出任何变化，给个背景色试试；设成了百分比但元素不是正方形——border-radius: 50% 画的是椭圆，宽高相等才是圆；有子元素溢出——图片没跟着圆角裁剪，加 overflow: hidden 解决。

问：内边距会撑破固定高度的容器吗？ 会，这叫内容溢出。给容器定了 height，内容加内边距超过这个高度，内容就会溢出边界（或触发滚动条）。经验法则：容器高度尽量用 min-height 设下限而不是 height 设死值，让内容自己撑开——"护栏思维"在垂直方向同样适用。

问：开发者工具里盒模型图上的橙色部分是什么？ 那是外边距区域的可视化，悬停时高亮。盒模型图是排错时的"账本"：逐层核对数字与你声明的值是否一致，多出来的部分就是"谁动了你的盒子"的线索——重置样式没生效、别的规则覆盖了属性，都会在这里现形。

间距系统的实践心法

散点式的间距值是页面"说不出的别扭"的主要来源：这里十四像素、那里十八像素、换个区块又冒出二十像素——单独看每个都合理，放在一起就是凌乱。工程上的解法是间距档位：预先定好三到五档（比如八、十六、二十四、四十八像素，恰好是八的倍数体系），全部间距只允许从档位里取。档位的好处是"错也错得整齐"，视觉上自然形成节奏。

四条落地纪律供参考：同一层级的元素用同一档间距（卡片与卡片之间统一二十四）；父子之间用大于子与子的间距（区块的内边距不小于内部元素间距，层级感油然而生）；标题与正文之间的间距小于段落之间的间距（标题"属于"下面的正文）；垂直节奏尽量成倍数，行高与间距共用基数时，文字块的底边会神奇地对齐。这些不是玄学，是排版领域几十年验证过的视觉规律。

盒模型还提醒我们区分"内"与"外"：卡片内容到卡片边的距离是内边距，属于组件自己的身体；卡片与卡片之间是外边距，是组件与邻居的社交距离。把这条界线守住，组件就能在任何环境里复用——把卡片从列表挪到侧栏，它自带呼吸感，而不会把在旧环境里养的外边距一起带来搅局。

本节要点回顾

• 四层结构：内容区放东西、内边距做呼吸、边框描轮廓、外边距隔邻居；背景铺到边框内侧（含内边距），不进外边距。
• 简写顺时针：padding 与 margin 共用一套"一到四值"规则。
• 百分比参照：内边距的百分比相对父元素宽度，垂直方向也一样。
• 边框三要素：宽度、样式、颜色，样式不可省；border-radius 一半出胶囊、五成出正圆。
• 合并取大：垂直相邻、父子穿透、空元素自合并三种情形；解法是边框、内边距或 BFC。
• 现代布局豁免：Flex/Grid 里没有外边距合并。

下一节聚焦那个让无数人半夜调试的问题——width: 200px 为什么实际占了 244px，以及一劳永逸的解法。