CSS 教程 / CSS 盒模型：内容、内边距、边框与外边距

CSS

创建时间 2026-11-08 最后修改 2026-11-08

CSS 盒模型描述了元素的内容区域、内边距、边框和外边距。这些区域会影响其可见尺寸和间距，而相邻的垂直块外边距在特定条件下可能会折叠（margin collapsing）。

识别四个盒子区域

下图显示了四个区域的位置。文本或图像放置在蓝色内容区内，黄色内边距和绿色边框围绕在外部。橙色外边距在边框之外。图片的颜色是为了区分区域，元素的背景颜色不会绘制在外边距上。

区域	角色	用于花园信息卡
内容	放置字母和图像的区域	访客信息
内边距	内容与边框之间的空间	将文本加间距，使其不会贴近边框
边框	元素的边框	卡片四周的线
外边距	边框外的间距	将其与另一张卡片分开

设置背景色后，默认的背景绘制范围包含内容区、内边距区及边框下方。元素的背景不会绘制在外边距区。在本节的 content-box 示例中，增加 padding 可以扩大内容周围带背景色的空间；margin 调整的是边框外的间距。背景绘制的范围可以通过单独的属性更改，但这里使用的是默认行为。

计算声明宽度和外部宽度

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

对于常规的content-box元素，width: 200px测量内容。两侧添加20px内边距和2px边框会产生244px的边框盒。16px的外边距位于其外，使水平空间（包括两边的外边距）为276px。垂直外边距可能折叠，因此不要对每个垂直情况简单地相加。更多详情，请参见CSS 宽度、高度、min/max 限制与 box-sizing。

使用box-sizing: border-box在声明宽度中包含内边距和边框。仅更改此示例中的该属性会得到200px的边框盒和156px的内容区域。下一个尺寸比较将在两种 box-sizing 规则下测量相同的卡片。参见MDN：CSS 盒模型入门。

理解一至四个值的间距简写

声明	上	右	下	左
padding: 10px	10px	10px	10px	10px
padding: 10px 20px	10px	20px	10px	20px
padding: 10px 20px 30px	10px	20px	30px	20px
padding: 10px 20px 30px 40px	10px	20px	30px	40px

边距值也按照相同的顺序指定。如果值为二，则表示上下、左右；如果值为三，则表示上、左右、下；如果值为四，则表示从上顺时针方向。如果你只想更改某些方向，可以使用单独的属性，如 padding-top。如果你稍后重写缩写属性，之前指定的单独值也可能会更改，因此请检查应用顺序。

padding-inline 和 margin-block 是基于文本书写方向的逻辑属性。通常在从左到右的横向书写中，inline 对应左右，block 对应上下，但在纵向书写中，物理方向不同。这并不总是意味着固定的横向或纵向方向。你可以在 MDN 的 margin-block 描述中查看方向对应关系。

理解垂直外边距折叠

在正常的块级布局中，相邻的垂直外边距会有条件地合并为一个间隙。这称为外边距折叠。之前元素的底部外边距为 20px，而下一个元素的顶部外边距为 30px 时，正外边距可能显示为更大的值 30px，而不是 50px。

外边距折叠不会合并水平外边距或内边距，并且 Flexbox 和 Grid 项目的外边距不会像正常流块的外边距那样折叠。父子外边距和负外边距会引入其他条件。本练习故意只比较两个兄弟块之间的正垂直外边距。参见 MDN: 外边距折叠。

运行示例并测量每个区域

将下面的代码写入 box-model.html ，以 UTF-8 编码保存后在浏览器中打开。第一张卡片检查四个区域，虚线框内的两行用于观察垂直外边距折叠。最后一个框显示三个值的内边距。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

在开发者工具的 Elements 下，选择 .card，并在 Styles 或 Computed 中查看盒模型显示。确保内容宽度为 200px，左右内边距为 20px，边框为 2px，外边距为 16px。卡片中的尺寸文字是静态说明，修改 CSS 后不会自动更新，应以开发者工具的实际测量值为准。
只修改内边距为 30px。内容宽度仍为 200px，到边框的总宽度为 264px。如果将其恢复到原来的 20px 并将外边距改为 32px，卡片本身的宽度仍为 244px，周围的间距会发生变化；比较后把外边距恢复为 16px。
查看虚线框内的两行之间。正的垂直边距 20px 和 30px 会合并，结果间距为 30px。如果将第一行的底部边距改为 40px，间距变为 40px。比较后，恢复到 20px。
检查 .three-values 的底部内边距为 30px，顶部为 10px，左右为 20px。如果删除最后的 30px 变成两个值，底部也会变为 10px；比较后恢复第三个值 30px。

由于浏览器默认的 p·h1 外边距、优先级更高的选择器或外边距折叠，间距可能与预期不同。首先，检查哪个元素的外边距，并一次更改一个值。未启用工作区保存或本地覆盖时，开发者工具中的临时更改会在刷新后消失，而保存到文件中的更改必须手动恢复到原始值。

CSS