盒模型

在一個文檔中，每一個元素都被表示爲一個矩形的盒子。肯定這些盒子的尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和位置是渲染引擎的目標。

在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊 與 內容邊。 

內容區域content  

是包含元素真實內容的區域。它一般包含背景、顏色或者圖片等，位於內容邊界的內部，它的大小爲內容寬度 或 content-box寬及內容高度或content-box高。

若是 box-sizing 爲默認值， width, min-width, max-width, height, min-height 與 max-height 控制內容大小。

內邊距 padding

延伸到包圍padding的邊框。若是內容區域content area設置了背景、顏色或者圖片，這些樣式將會延伸到padding上(譯者注：而不單單是做用於內容區域)。它位於內邊距邊界內部, 它的大小爲 padding-box  寬與 padding-box 高。

內邊距與內容邊界之間的空間能夠由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding 控制。

邊框 boder

是包含邊框的區域，擴展了內邊距區域。它位於邊框邊界內部，大小爲 border-box  寬和 border-box 高。由 border-width 及簡寫屬性 border控制。

外邊距 margin  

用空白區域擴展邊框區域，以分開相鄰的元素。它的大小爲  margin-box 的高寬。

外邊距區域大小由 margin-top, margin-right, margin-bottom, margin-left 及簡寫屬性 margin 控制。