所謂的盒子模型是將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同理。
