CSS margin 屬性與用法範例

CSS margin 屬性用來定義一個區域（例如 DIV 或 span）的外邊界距離，俗稱外距，與常用的 padding（內距）剛好不同。margin 可以讓你一次設定四個邊的外距，也可以分別設定每個邊不同的外距，特別的是 margin 可以設定負値。

語法範例

margin:上右下左;　margin:上下左右;　margin:上左右下;　margin:四個邊同樣値;

第一個範例我們分別設定四個邊不同的値，依序為上右下左，每個値必須由空白隔開，第二個範例我們設定了兩個値，上下邊的外距都會一樣，而左右邊的外距會一樣，第三個範例我們給了三個値，分別是上外距、左右外距與下外距，這樣設定左右邊的外距會一樣，第四個範例我們只給了一個値，這樣代表四個邊的外距都一樣，算是比較簡短的寫法。

CSS margin 實際範例

這樣的寫法代表上外距為 5px，右外距為 10px，下外距為 15px 而左外距則為 20px，呈現結果如下方所示

在此範例中的橘色區域就是我們要設定的區域，透過 margin 分別設定了四個邊的外距，所以每個邊距離都不一樣，範例中的 background-color 是背景顏色，width 與 height 則是設定 DIV 區塊的寬度與高度。

CSS margin 的四個邊獨立寫法

margin-top：與上方元素的距離
margin-right：與右方元素的距離
margin-bottom：與下方元素的距離
margin-left：與左方元素的距離

以上各個單邊可以單獨使用，也可以混搭使用。

margin 可以的值有 auto、長度單位與 %，各種値應用範圍不一定相同

margin:auto;　//代表讓瀏覽器自己去設定。
margin:長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
margin:%;　//讓瀏覽器自己去設定，跟邊界元素有關。

延伸閱讀