教學｜調整邊界( margin & padding ) @ 天使的花園

上一篇教學有講到margin，我突然想到可能有人不知道這個，就趕緊補上這篇。

　

先說明一下，margin和padding都是用來調邊界的。
如果想移動一個東西，也可以利用改變它的邊界來達到移動的效果。
而margin和padding的分別用說的比較難解釋，所以等等有圖給大家看。

基本設定：
假如我要把#content整個向右移10px，
可以用#content{margin-left: 10px; }，其實它的意思是要左邊的邊界為10px，看起來就像是往右邊移動10px。
當然也可以用margin-top、margin-bottom、margin-right來做改變。

另外，如果上下左右的邊界都要改變，寫那麼多就有點雜的感覺，所以有縮寫可以用，而情況有三種：

　　1. 上下左右的邊界都一樣：
　　　就直接打：margin: 10px;
　　　意思就是上下左右的邊界都為10px。(這裡以10px做範例，可自行調整數值。)

　　2. 上下左右的邊界都不同：
　　　例如：上邊界5px、下邊界6px、左邊界7px、右邊界8px。
　　　就這樣打：margin: 5px 8px 6px 7px;
　　　順序是：上右下左。

　　3. 上下邊界一樣，左右邊界一樣：
　　　例如：上邊界5px、下邊界5px、左邊界10px、右邊界10px。
　　　就這樣打：margin: 5px 10px;
　　　順序是：上下、左右。

＊注意：雖然上面的範例都是margin，但是padding用的也是一樣的方法噢！

　

O.K.!! 現在會設定了齁？那我們來說margin和padding的差別～

例如：要改#content的邊界，我們直接看圖：
(黃色區塊是#container，就是有包含#content和#links的東西。而紅色是#content，就是內文的地方。)

　　1. 這是都還沒有設定之前：
　　

　　2. 這是 #content{margin-left: 10px; } 的效果：
　　

　　3. 這是 #content{padding-left: 10px; } 的效果：
　　

這樣看得懂嗎？簡單來說，margin是指整個content的邊界，padding是指content裡面的邊界。