关于margin,padding,border,background之间的关系。这可是CSS排版最基础的知识，msdn早就有一张经典的图。但这个更简单直观一些。说到模型还有一个inline模型（竹笋炒肉 这么叫的，我觉得这种说法不太准确）。简单地说，就是margin,padding这些用来控制大块的版式，而inline控制的是文字和段落的东西，如果你做过平面印刷设计，就明白了。看这个链接

http://hedong.3322.org/newblog/archives/000074.html

说的不是很清楚，有些乱。其实随便一个有文字的编辑软件都有这些字母、段落排版的设置，英文单词也是基本一致的。除了 display:inline以外，这是html特有的，表示是否“独占”一行（你就这样理解好了）。

还有个3D版本

原文在：

http://www.hicksdesign.co.uk/journal/483/3d-css-box-model