網頁上的元素辣麼多，我該用什麼辦法讓它們排列整齊、間距合理呢。常幹家務的朋友們就容易理解了，用收納盒呀！

所以用CSS做網頁佈局就涉及一個盒子的概念，簡單理解，我們可以把頁面上的所有HTML元素看作一個個的盒子，網頁上所展示出來的具體內容，如：文字、圖片等都可以理解為內容，是放在盒子裡面的東西。

這些裝著內容的盒子排列在網頁上，盒子與盒子存在著一定的間隙，我們稱為外邊距，

每個盒子都有邊框，每條邊框都可以設定自己的樣式，邊框與內容之間也可以存在一定的間隙，我們稱為內邊距。

外邊距、邊框、內邊距按順時針方向又都可以分為上、右、下、左四個部分，注意，這四個部分我們都是可以單獨設定其樣式的喲！

有圖有真相，下圖：

由上述可知，盒子由外到內可以列出以下四個屬性：

♐外邊距margin和內邊距padding

外邊距margin和內邊距padding以邊框為分界線，它們分四個方向可以分別設定四個不同的值，按順時針方向分別是上、右、下、左，如下：