CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。
Box Model 的意思，直譯英翻中可以解釋成，方塊模組，也就是說，每一個元素我們都可視它為一個 Box（方塊）。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。而一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成，如下圖：
所以一般我們指定的 width（寬度） 和 height（高度）是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。
margin可以解釋成，以border（邊欄）為主，邊欄以外的空白處。
padding則是以border為主，邊欄以內的空白處。
padding則是以border為主，邊欄以內的空白處。
