盒式模型是CSS中的核心内容。从某种意义上来讲，CSS中定义的任何对象，都是使用盒式模型的。
W3C对CSS盒式模型的定义相当准确，但由于不同的浏览器对CSS盒式模型的实现不同，这就使得盒式模型变得难以捉摸。在www.w3cn.org上有下面这样一个“CSS2.0盒式模型层次3D示意图”，很好的说明了CSS2.0的盒式模型。
从上图可见，CSS盒式模型表示的每个对象，结构上由content（内容）、padding（填充）、border（边框）、margin（空白边）组成。盒式模型还有两个应用于content和padding上的background属性，它们是background-image（背景图片）和background-color（背景色）。margin是透明的，一般使用它控制元素之间的间隔。

Firefox浏览器的盒式模型完全符合W3C的设计目标，而IE6的盒式模型却和标准盒式模型有很大的差别。具体的来说，标准盒式模型的width属性指的是content的宽度；而在非标准的盒式模型中，width属性表示的是content、padding和border三者宽度的总和。这就使得相同的width值下，非标准盒式模型的对象会比标准盒式模型的对象小。

空白边（margin）叠加
简单的解释这个问题，就是当两个垂直的空白边相遇时，它们将形成一个空白边，这个新空白边的高度等于两个发生叠加的空白边的高度中的最大值。
空白边的叠加是有实际意义的。以由多个段落组成的文本页面为例，第一个<p>元素的margin-bottom和第二个<p>元素的margin-top叠加，使得段落之间的空白不至于太多。
注意：只有普通文档流中块状元素的垂直空白边才会发生空白边叠加。行内元素、浮动框或绝对定位元素之间的空白边不会叠加。