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

 

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

基本設定:
假如我要把#content整個向右移10px,
可以用
#content{margin-left: 10px; },其實它的意思是要左邊的邊界為10px,看起來就像是往右邊移動10px。
當然也可以用
margin-topmargin-bottommargin-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裡面的邊界。

 

 

 

本文引用自yingmei75 - 教學|調整邊界( margin & padding )

yuki 發表在 痞客邦 留言(0) 人氣()