CSS使用box模型的原因是：
+---------------------| Margin| +-------------------| | Border| | +-----------------| | | Padding| | | +---------------| | | | Width x Height
是因为CSS是一种文档样式语言。（最初）设计时考虑了研究论文和其他正式文件，而不是用来制作漂亮的图形。因此，模型围绕内容而不是容器旋转。
CSS不是一种编程语言，而是一种样式语言。它没有明确告诉文档应如何显示，而是提出了浏览器应遵循的一些准则。所有这些都可以由实际的编程语言：Javascript 覆盖和修改。
回到内容模型的想法，考虑以下CSS：
p{ background-color: #EEE; border: 1px solid #CCC; color: #000; margin: 10px; padding: 9px; width: 400px;}height未指定，因为内容定义了高度，它可能会很长，可能会很短，但这是未知且无关紧要的。该width设置，因为这是有多宽400像素的内容（文本）应该是。
该padding仅仅是延长的背景颜色，使的手段文字可以从边缘清晰漂亮了，就像你如何留出空间上的一张纸上写时/打印。
这border是一种围绕某些内容以使其与其他背景区分开的方法，或在各种元素之间提供边框（图形）。
该margin通知段落离开边缘之间一定的空间，并与容限塌陷，每组将保持均匀，而不必隔开指定不同的余量为所述第一或最后一个元素。
为了保持流畅性，width默认为auto，这意味着宽度将尽可能宽：
不会不合理地压缩内容没有填充物超出其容器当然，在边缘情况下，填充内容将扩展到其容器之外，因为内容可能会被压缩。这都是关于内容的。
