CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個元素（element）都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。下面是Box Model的圖示：
Box-Model 1
說明：上圖中，由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
下圖是W3School的Box Model 圖解：
Box-Model 2（W3School）
說明：
1.和第一幅圖一樣，在上圖中，元素框的最內部分是實際的內容（element）；直接包圍內容的是內邊距（padding），內邊距呈現了元素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距默認是透明的，因此不會遮擋其后的任何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。
2.內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器（*）對所有元素進行設置：
/*設置所有元素的外邊距和內邊矩為0*/ * { margin: 0; padding: 0; }
3. 在 CSS 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，以下是CSS代碼：
#box { width: 70px; margin: 10px; padding: 5px; }
下圖是對上面CSS代碼的解釋：
以下是一個完整的CSS Box Model布局的示例。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Box Model</title> 5 <style type="text/css"> 6 body 7 { 8 background: #333; 9 } 10 div 11 { 12 height: 240px; 13 width: 360px; 14 border: 5px solid yellow; 15 background: blue; 16 margin: 0 auto; 17 } 18 span 19 { 20 display: block; 21 width: 50%; 22 height: 50%; 23 background: red; 24 border: 5px solid yellow; 25 color: White; 26 font-size: 14px; 27 font-weight: bold; 28 margin: auto; 29 margin-top: 60px; 30 line-height: 120px; 31 text-align: center; 32 vertical-align: middle; 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <span>Box Model的內容</span> 39 </div> 40 </body> 41 </html>
以下是上面示例的效果截圖：
