CSS盒子模型（Box Model）

　　所謂的盒子模型是將html元素看成一個盒子。在日常生活中，盒子是最常被看到的物品。例如一盒月餅，有外包裝盒，裡面是一般鐵盒，裡面的是朔料或是紙類包裝，一盒大包裝裡有好幾個小包裝。一樣的道理，在html中每個標籤看成一個有型的盒子，標籤之間的可以看成盒子與盒子的關係。

　　盒子模型組成：內容（content)：元素要呈現的東西

　　　　　　　　　填充（padding)：內容與邊框之間的距離

　　　　　　　　　邊框（border）

　　　　　　　　　外邊距（margin)：盒子之間的距離

 

　　width和height屬性是內容（content）的寬度和高度屬性，並不是元素的寬度和高度。

　　元素的寬度=左外邊距+左邊框+左填充+width+右填充+右邊框+右外邊距

　　元素的高度=上外邊距+上邊框+上填充+height+下填充+下邊框+下外邊距

　　由上面的公式可以推論出可以分別設定每個邊的屬性（按順時針方向）。

　　例如：padding:10px;(等同於設定為padding:10px 10px 10px 10px;)

　　padding:10px 20px;(等同於：padding:10px 20px 10px 20px;)

　　padding:10px 15px 20px;(等同於：padding:10px 15px 20px 15px;)

　　其他margin和border同理。