W3C組織建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。對於初學者，經常會搞不清楚margin，background-color，background- image，padding，content，border之間的層次、關係和相互影響。這裏提供一張盒模型的3D示意圖，希望便於你的理解和記憶。
每個HTML元素都可以看作一個裝了東西的盒子，盒子裏面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。
盒模型的實際寬度
關於盒模型，還有以下幾點需要注意：
·對於塊級元素（display:block），未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮，例如：有上下2個元素，上元素的下邊界爲5px，下面元素的上邊界爲20px，則實際2個元素的間距爲20px（2個邊界值中較大的值）。如圖所示。
注1. 塊級元素（display： block）
每個塊級元素都從一個新行開始，而且其後的元素也需另起一行開始，標題、段落、表格、層、body等都是塊級元素。塊級元素只能作爲其他塊級元素的子元素，而且需要一定的條件。
·內聯元素，例如<a>、<span>等，定義上下邊界不會影響到行高（line-height），內聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。
注2. 內聯元素（display：inline）
內聯元素不需要在新行內顯示，而且也不強迫其後的元素換行，如a、em、span等都爲內聯元素。內聯元素可以爲任何其他元素的子元素。
·浮動元素（無論左或者右浮動）邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向於0，即壓縮到其內容能承受的最小寬度。
·如果盒中沒有內容，則即使定義了寬度和高度都爲100%，實際上只佔0%，因此不會被顯示，此點在採取層佈局的時候需特別注意。
·邊界值可爲負，其顯示效果各瀏覽器可能不相同。
·填充值不可爲負。
·邊框默認的樣式（border-style）爲不顯示（none）。
推薦一個flash ，可以幫助理解
http://redmelon.net/tstme/box_model/Box_Model.swf
擴展閱讀 http://www.w3.org/TR/CSS2/box.html