adbpix生活部落格

CSS 的排版有兩個重要的語法，分別是 margin 與 padding，一個控制外距（margin），一個控制內距（padding），很多人剛開始搞不懂這兩種用法有什麼差異，其實最簡單的想法就是把與其他區塊的距離用 margin 來處理，而自己本身區塊內的距離就用 padding 來處理。

舉個簡單的範例來說，我們寫兩個 <div> 區塊來表示，一個放上面，另一個則放下面，兩個區塊間假設我們給他 12px 的距離，寫法大致上可以是這樣

<div style="margin-bottom:12px;width:200px;height:50px;background-color:red;"></div><div style="margin-bottom:12px;width:200px;height:50px;background-color:red;"></div>

看起來就會像下面這樣

 範例裡面的 margin-botton 是 <div> 區塊底下的外距，我們設定為 12px 個單位距離，width 是寬度，hright 是高度而 background-color 是背景顏色。

更詳細的介紹可以看下面這篇網路上的教學

CSS margin 屬性與用法範例
http://www.wibibi.com/info.php?tid=110

其實並不難，只是需要花點時間研究。