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 設定為零來覆寫這些浏覽器樣式。這可以分别進行，也可以使用通用選擇器（*）對所有元素進行設定：
3. 在 CSS 中，width 和 height 指的是内容區域（element）的寬度和高度。增加内邊距、邊框和外邊距不會影響内容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的内邊距。如果希望這個元素框達到 100 個像素，就需要将内容的寬度設定為 70 像素，以下是CSS代碼：
下圖是對上面CSS代碼的解釋：