Sunday, November 1, 2009

[CSS] 搞定CSS一定要懂的 "padding" 跟 "margin"

在CSS的世界中,要進行排版工作一定要會運用內距(padding)跟邊距(margin),這兩個東西有點像,所有常常會亂設一通,padding不行就試margin,反正總有一個可以用,其實自己try一下就知道這兩個的差異了…



假設我們產生一個400*200的矩形,這個矩形四邊的邊框皆有20px那麼粗,則它大概會長這樣:
1可以發現因為邊框很粗的關係,矩形變成440*240了。

而padding呢? 我們讓邊框恢復正常,但是把padding設成20px,它大概會長這樣:2感覺上,padding應該是內縮20px,實際上並非如此,因為我們發現矩形跟上一張圖一樣外擴了,這個特性要特別注意。

接著我們換margin來試試,同樣也設成20px,看看它會長成什麼樣子:3恩~跟我們預期的差不多,矩形因為margin的關係被推了20px的距離。

看完這些圖應該就很清楚知道padding跟margin的差異的吧,尤其是padding自動外擴的特性,所以在用CSS排版時,為什麼要用兩層div去包,就是要將長寬設在外層,padding設在內層,這樣大小才會被固定住
另外,在背景色跟背景圖方面,
padding跟margin的差別在於,元素的背景色彩或背景圖像會在padding之下延伸,但不會在margin之下延伸。

1 comment:

  1. 不好意思,這篇的『邊框』、『padding』、『margin』應該改為40,然後440*240應該改為480*280。(謝晒 留)

    ReplyDelete