days here| Online
﹥I am 桑妮 :D arrow_61.gif 加我為Pixnet好友
﹥最佳解析度、瀏覽器:1024*768↑ on Firefox & Chrome

※ 近來少使用痞客邦,無法即時回應留言,請見諒噢。
 不回應籠統的問題,沒禮貌的留言也不會回覆。若是有明確問題的留言,看到就會回應。

上一篇教學有講到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裡面的邊界。

 

如果不懂再發迴響問噢!:)

創作者介紹

Learn to live *

桑妮♥ 發表在 痞客邦 PIXNET 留言(20) 人氣()


留言列表 (20)

發表留言
  • diarylife
  • 為什麼我看框跑的好嚴重 囧
  • 嗯?? 我這個版嗎??
    IE7是有一點點點跑, 可是影響不大..
    就沒改了 XD (懶)
    你是什麼瀏覽器阿 = v =

    桑妮♥ 於 2008/05/12 08:06 回覆

  • 阿JO
  • 真的太謝謝了...
    解決我不少麻煩...感恩 (抱)
  • 有解決到嘛?! 好耶~ = v =
    不用客氣不用客氣~ XD (抱)

    桑妮♥ 於 2008/05/15 08:14 回覆

  • diarylife
  • 我是ie7欸

    右邊的內文都跑出去了 囧
  • 是嗎??
    我看不會阿~ = =
    不管他了~~ XD

    桑妮♥ 於 2008/05/15 08:14 回覆

  • theleast
  • :)

    有了那幾張示意圖,關於margin和padding的區別一目瞭然。
    感謝解惑。XD
    實在對CSS苦手啊...~"~
  • 呵呵~有圖有差齁?? XD
    懂了就好~懂了就好啦~ ^ ^

    不會很難啦~
    你又離CSS更進一步了不是嗎~ :D

    桑妮♥ 於 2008/05/15 08:16 回覆

  • jertsai
  • padding 如果再設有height的標籤裡,盡量少用,因為判讀會很機車=W=
    我忘記了是哪個會有問題!就是如果height設20px 那一方瀏覽器是20px 但另外一個就是要20加上padding的距離..
    另外就是在FF下,如果使用padding,來做兩區塊上面那的區塊的設定,雖然也可以定位,也看的到下方區塊,但是如果有連結,就可能無法點擊!
    --
    不過這是我遇到的現象啦!大家是不是一樣我也不知道=口= 一起交流一下嚕! CSS是博大精深的ˊˋ
  • Mr.J大..
    您說的太複雜了.. 說真的我聽不太懂欸 XD
    不過還好我沒有喜歡用padding..
    我比較愛margin ~ XD
    可是padding好像很常用到欸..Orz
    然後你太強了.. 遇到問題都知道為什麼..囧

    P.S. 謝謝J大!! XDD

    桑妮♥ 於 2008/05/18 16:53 回覆

  • farchnad
  • 嗨,你好!我現在是用你設計的版形,但是我在改迴響表格的時候不小心錯刪了語法,請問是否可以挽救那部分?我很喜歡這個tea time的設計,希望能用久一點。等你回覆,謝謝!><
  • farchnad
  • 沒事了,我剛好有找到使用同一版型的網誌,copy好語法了。總之謝謝了,這個版好看又很耐看。
  • YouNiQ3Q
  • 請問一下~~
    container要加虛線邊框要怎嚜用0.0
  • 現在才發現這則 - -"...

    在container裡加入:
    border: 1px #ccc dashed;

    會變成四邊有1px的灰色虛線,
    數字跟色碼可自行更改。

    有問題可以再問我 :)

    桑妮♥ 於 2010/07/07 07:52 回覆

  • 殺毛人
  • 有看過邊界用百分比的 那是什麼意思阿><??
  • 嗄?不懂你的意思,我文章沒有說到百分比阿?

    桑妮♥ 於 2010/10/12 15:25 回覆

  • 殺毛人
  • 我是說別人的@@ 他單位是用百分比的
  • (噢,沒看到這篇= =")

    百分比也是可以阿,還可以設定成auto,
    只是百分比我不太會捉摸那個範圍…= w =

    桑妮♥ 於 2010/11/16 20:08 回覆

  • YUYE
  • 3Q~我的問題解決了
  • RozenMaiden
  • Orz,,,,感謝,,,,懂了呢,,,,百分比對於Scaling 貢獻不少
  • 訪客
  • 謝謝~經你這麼一說,margin跟padding的差異就很清楚了。
  • 那就好,不用客氣。

    桑妮♥ 於 2013/02/05 03:55 回覆

  • 藥師謙
  • 簡而易懂的說明,感謝版主的教學分享
  • 不客氣,很高興有幫到人。:)

    桑妮♥ 於 2013/01/19 12:15 回覆

  • 過客
  • 讚啦~~~~~~~~~
  • 悄悄話
  • 我有3隻貓
  • 你好~最近剛搬來痞克邦,第一次操作CSS 搞得一個頭2個大的
    終於找到這裡,開心有了我看得懂的教學方法
    但 我自己怎麼試就還是沒辦法
    請問一下
    如何設定才能像你一樣2邊往外、內文加大不至於圖片會被裁掉
    謝謝
  • 這問題影響最大的不是邊界,是內文寬度,請看這篇:
    http://yingmei75.pixnet.net/blog/post/17491774

    另外,也要先確定自己的圖片是多大,再來設定內文的寬度。
    這時候才跟邊界有關係(padding),如果圖片固定600px,內文設定不可剛好600px,要留點空間設定padding。

    假設padding設定左右各5px,那內文至少要600px+5px+5px=610px的寬度,圖片才能全部顯現。

    不然就把圖片改小一點吧。

    桑妮♥ 於 2013/09/07 03:47 回覆

  • 悄悄話
  • cynthia
  • 請問一下,
    1.我想把右邊側欄整個刪掉 該怎麼刪呢?
    2.然後左欄想要靠左一點,讓content位置能看起來大一點
    3.把上面album blog guestbook profile換成自己想要的字形
    4.把繼續閱讀改成英文
找更多相關文章與討論