之前講了padding,現在學習下盒子模型
CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個元素（element）都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。下面是Box Model的圖示：
說明：上圖中，由內而外依次是元素內容（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 圖解：
說明：
1.和第一幅圖一樣，在上圖中，元素框的最內部分是實際的內容（element）；直接包圍內容的是內邊距（padding），內邊距呈現了元 素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距默認是透明的，因此不會遮擋其后的任 何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。
2.內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器（*）對所有元素進行設置：
/*設置所有元素的外邊距和內邊矩為0*/* { margin: 0; padding: 0; }
. 在 CSS 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，以下是CSS代碼：
#box { width: 70px; margin: 10px; padding: 5px; }
下圖是對上面CSS代碼的解釋：
