css margin 外距

css margin 外距顧名思義就是元素本身以外的距離,也就是元素與元素間,彼此的距離,相對於 padding 內距的效果,margin 完全無法設定元素內距,卻可以網頁內各元素的位置排好,常用到 margin 的元素是 DIV 區塊,例如透過 DIV 執行網頁排版的時候就必須使用 margin 來固定每個區塊彼此間的位置,然而 DIV 網頁排版幾乎已經取代 HTML 的 TABLE 排版成為現階段網頁設計排版的主流方式,所以 margin 技巧的運用就顯得非常重要。

css margin 語法規則
margin: 距離;
css margin 的語法僅有 margin 加上要設定的距離,常用的距離單位如 em、cm、px 等,建議使用 px 比較普遍,假設 margin 只有設定一個距離,代表區塊距離四個邊的外距都是一樣的,如果 margin 設定了兩個距離,代表上下外距一樣,左右外距一樣,第三種情況是 margin 設定了四個距離,則代表分別替四個邊的外距做設定,方向設定的概念與 padding 其實是一樣的。

情況一、『margin:10px』表示上下左右的外距均為 10px。
情況二、『margin:10px 8px』表示上下外距為 10px、左右外距則為 8px。
情況三、『margin:10px 8px 6px 5px;』表示上下左右的外距分別為 10px、8px、6px、5px。

範例、用 margin 將兩個 DIV 區塊增加垂直距離
呈現效果
第一個區塊
第二個區塊
第三個區塊
範例中共有三個 DIV 區塊,最上面的區塊使用了『margin:0px 0px 10px 0px;』這樣的屬性,所以會有下外距 10px 的效果,與第二個 DIV 區塊間會有 10px 的距離,才不會讓兩個區塊黏在一起。第二個區塊的 margin 則是四個外距都是 0px,代表四個方向都沒有外距,結果就與第三個區塊黏在一起了,這就是有沒有使用 margin 處理外距的差別。

css margin 常常與 padding 搭配在一起設計,因為 DIV 區塊本身沒有什麼美化效果,好的 DIV 排版最基本的就需要 margin 與 padding 這兩個基本的 css 屬性來達成,看完這一篇關於 margin 的設計基礎,來看看內距 padding 的規則:css padding 內距

如果你對於 DIV 區塊的應用還不是很熟悉,請參閱這篇:CSS DIV 區塊

延伸閱讀
分享於 2014-08-13