CSS中的margin屬性

語法：

margin：auto/length

引數：

auto：值被設定為相對邊的值

length：由浮點數字和單位識別符號組成的長度值 | 百分數。百分數是基於父物件的高度。

說明：

內聯物件要使用該屬性，必須先設定物件的height或width屬性，或者設定position屬性為absolute。在IE4+，margin屬性不可用於td和tr物件。外延邊距始終透明。

margin延伸（單獨設定四邊間距屬性單詞）
margin-left 物件左邊外延邊距 （margin-left:5px; 左邊外延距離5px）
margin-right 物件右邊外延邊距 （margin-right:5px; 右邊外延距離5px）
margin-top 物件上邊外延邊距 （margin-top:5px; 上邊外延距離5px）
margin-bottom 物件下邊外延邊距 （margin-bottom:5px; 下邊外延距離5px）

常見margin使用場景

margin實際應用地方:
兩個佈局之間距離設定。

如上圖中“CSS手冊”和“DIV CSS研教室”黃顏色的背景之間空隙（背景土紅）

二、css margin縮寫簡寫

margin屬性CSS樣式，如遇到上下、左右、上下左右等情況我們可以縮寫簡寫優化。
你可能需要了解：CSS優化-CSS壓縮：http://www.divcss5.com/jiqiao/j97.shtml
你可能需要了解：HTML優化-HTML程式碼優化壓縮：http://www.divcss5.com/jiqiao/j326.shtml

1、只有上下情況縮寫
原始：margin-top:5px; margin-bottom:6px
縮寫簡寫為：margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情況縮寫
原始：margin-left:5px; margin-right:6px
縮寫簡寫為：margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三邊情況縮寫
原始：margin-top:5px; margin-bottom:6px; margin-left:4px
縮寫：margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四邊相同值縮寫
原始：margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
縮寫：margin:5px;

5、四邊不同值縮寫
原始：margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
縮寫：margin:5px 8px 6px 7px;

6、四邊其中上下值和左右值各相同縮寫

上下相同、左右相同原始：margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
縮寫：margin:5px 7px;

三、常用的margin樣式

1、用margin設定物件盒子間距
我們常用margin設定2個盒子之間距離，無論上下左右的距離我們均可以利用margin實現間隔。

實際可用margin地方示圖

2、利用margin實現佈局居中，基礎單詞：
marign:0 auto;
即可實現物件居中，但需要一個條件，那就是該物件上級一定要設定text-align:center內容居中屬性樣式。有的瀏覽器body標籤不設定text-align:center內容居中樣式，其下級包含物件設定了margin:0 auto也會讓其佈局居中，但為了相容各大瀏覽器建議對body設定一個text-align:center屬性樣式，這裡divcss5提供一個css初始化模板為DIV CSS佈局時候無需重複設定css text-align:center等初始化樣式屬性。

四、css margin普通案例

DIVCSS5設定2個盒子，為了體現margin作用，我們對其2盒子設定css border邊框、一定css寬度和css高度。

1、margin用法css程式碼
.divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1px solid #F00}
.divcss5-bottom{ margin-top:10px}

2、html程式碼片段
<div class="divcss5-top">上物件</div>
<div class="divcss5-bottom">下物件，我們設定了margin-top為10px間距</div>

3、mairgin應用案例截圖

margin例項實踐案例效果圖

從上案例我們分析出margin是設定物件（比如div盒子、span盒子等）之間間距，並體現出margin是存在與物件盒子邊框外側。

五、css margin總結

Margin樣式是設定物件與物件之間間距，單獨設定一邊的間距我們可以使用margin-left、margin-right、margin-top、margin-bottom樣式屬性，margin是設定盒子物件之間間距，一般設定時候注意margin簡寫優化。多實踐並觀察案例理解了margin作用即可很快上手使用margin。

margin缺點：
在使用CSS margin的時候容易造成CSS HACK。IE6解釋此屬性的時候容易造成雙倍距離。
您可能需要了解CSS相容瀏覽器知識。