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

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

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

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

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

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