語法範例
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
第一個範例我們分別設定四個邊不同的値,依序為上右下左,每個値必須由空白隔開,第二個範例我們設定了兩個値,上下邊的外距都會一樣,而左右邊的外距會一樣,第三個範例我們給了三個値,分別是上外距、左右外距與下外距,這樣設定左右邊的外距會一樣,第四個範例我們只給了一個値,這樣代表四個邊的外距都一樣,算是比較簡短的寫法。
CSS margin 實際範例
<div style="width:130px;height:130px;background-color:#D4E6F8;">
<div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
</div>
這樣的寫法代表上外距為 5px,右外距為 10px,下外距為 15px 而左外距則為 20px,呈現結果如下方所示<div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
</div>
在此範例中的橘色區域就是我們要設定的區域,透過 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:%; //讓瀏覽器自己去設定,跟邊界元素有關。