CSS margin 邊界使用介紹範例教學

css margin 是用來設定邊界距離的一個重要語法，透過 margin 你可以設定各元素間的間距，margin 是屬於外距，用法與 padding 內距不太一樣。你可以對單一邊界做設定，也可以一次設定四個邊界。

margin-top：設定上邊界距離。
margin-left：設定左邊界距離。
margin-right：設定右邊界距離。
margin-bottom：設定下邊界距離。

如果四個邊界都要設定一樣的話，可以直接採用一個 margin 來代表四個邊界距離都相同

margin 的值

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

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

範例練習

在這個範例中我們只設定了一個 margin，用以代表四個邊界都是一樣的，語法中的 border 指的是邊框，第一段文字的邊框設為 2px 以及藍色，第二段文字的邊框設為 2px 紅色，這樣比較容易看出兩個 div 元素的差異。在第一段文字的 margin 設為 10px，所以他四個邊界外距都是 10px，主要兩個元素比較可以看到藍色邊框與紅色邊框有一段 10px 的距離。

css margin 簡短的寫法

也許有人會問，每次都分別對四個邊設定，那不就每次都要寫四次 margin，有夠累的啦！別擔心，其實有簡單的寫法唷！

margin:上邊界右邊界下邊界左邊界;
margin:上下邊界左右邊界;

請記住這個順序，上右下左，任何瀏覽器都是這樣判斷的，下面我們舉幾個例子來看看簡寫與全寫比較。

Example A

margin:10px 20px 10px 20px;

等同於

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;

Example B

margin:20px 10px;

這代表的是上邊界與下邊界都是 20px，左右邊界都是 10px，等同於

margin-top:20px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;

Example C

margin:10px;

這代表每個邊界都是 10px，等同於

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

Example D

有人會問 margin 可以是負値嗎？答案是可以的，如果位置有跟其他元素交錯到會覆蓋到其他元素。

以相同的範例程式碼修改

開啟程式碼頁面

這次我們將第二段文字的 margin 上下邊界設為 -15px 讓他去覆蓋到第一段元素的部分，呈現結果如下

延伸閱讀

CSS padding 內距

外部連結

CSS margin