CSS规范 > 8 盒模型 Box Model_html/css_WEB-ITnose

8 盒模型 Box Model

URL: http://www.w3.org/TR/CSS2/box.html Translator : HaoyCn Date: 15th of Aug, 2015

译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！

CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。

8.1 盒尺寸 Box Dimensions

每个盒都有一个内容区域 Content （如，文本，图片等）以及可选的围绕在周围的内边距、边框和外边距区域；每个区域的大小由本文后述的属性指定。下图展示了这些区域的关联以及用于描述外边距、边框和内边距的各部分的术语。

外边距、边框和内边距可以被分解到上、右、下、左各部分（如，在上图中， LM 表示左外边距， RP 表示右内边距， TB 表示上边框等）。

立即学习“前端免费学习笔记（深入）”；

四种区域（内容、内边距、边框、外边距）的边界被称作一个“边缘 Edge ”，因此每个盒有四种边缘：

内容边缘 Content Edge 或内边缘 Inner Edge

内容边缘围绕着由盒的宽和高所指定的矩形，该矩形通常由元素的已渲染内容 Rendered Content 所决定。四个内容边缘规定了盒的内容盒 Content Box 。

内边距边缘

内边距边缘围绕着盒的内边距。如果内边距宽度为0，则内边距边缘即是内容边缘。四个内边距边缘规定了盒的内边距盒 Padding Box 。

边框边缘

边框边缘围绕着盒的边框。如果边框宽度为0，则边框边缘即是内边距边缘。四个边框边缘规定了盒的边框盒 Border Box 。

外边距边缘或外边缘

外边距边缘围绕着盒的外边距。如果外边距宽度为0，则外边距边缘即边框边缘。四个外边距边缘规定了盒的外边距盒 Margin Box 。

每个边缘都可以被分解成上、右、下、左边缘。

盒内容区域的尺寸??即内容宽度 Content Width 和内容高度 Content Width ??由这些因素所决定：生成盒的元素是否设置了 width 和 height 属性；盒是否包含了文本或其他盒；盒是否为表格；等等。盒的宽度和高度将在视觉格式化模型详述一章中讨论。

盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 background 属性所规定。外边距的背景始终为透明。

8.2 外边距、内边距和边框的例子

下例展示了外边距、内边距和边框如何交互。HTML文档：