margin 屬性/樣式/取值/語法/格式寫法/簡寫/用法[CSS教程手冊]

語法：

margin：[ <length> | <percentage> | auto ]{1,4}

默認值：看每個獨立屬性

適用于：所有元素，除非 table | inline-table | table-caption的表格類元素之外

繼承性：無

動畫性：是

計算值：看每個獨立屬性

相關(guān)屬性：margin-top||margin-right||margin-bottom||margin-left

媒體：視覺

取值：

auto：: 水平（默認）書寫模式下，margin-top/margin-bottom計算值為0，margin-left/margin-right取決于包含塊的剩余可用空間。詳見：margin系列之keyword auto
<length>：: 用長度值來定義外補白。可以為負值
<percentage>：: 用百分比來定義外補白。水平（默認）書寫模式下，參照其包含塊的width進行計算，其它情況參照height，可以為負值

說明：

檢索或設(shè)置對象四邊的外延邊距。

如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
非替代(non-Replaced)行內(nèi)元素可以使用該屬性設(shè)置左、右兩邊的外補丁；若要設(shè)置上、下兩邊的外補丁，必須先使該元素表現(xiàn)為塊級或行內(nèi)塊級。
外延邊距始終透明。
某些相鄰的margin會發(fā)生合并，我們稱之為margin折疊：
示例：
```
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>這是一個標題</h2>
<div>
	<h2>這是又一個標題</h2>
</div>
```
本例中，第一個h2的margin-bottom（10px），div的margin-top（20px），第二個h2的margin-top（10px）將被合并，它們之間的margin間隙最后是（20px），即取三者之間最大的那個值。
如果給上例中的div加上border的話：
示例：
```
h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
<h2>這是一個標題</h2>
<div>
	<h2>這是又一個標題</h2>
</div>
```
本例中，第一個h2的margin-bottom（10px），div的margin-top（20px）將被合并，但第二個h2的margin-top不與它們合并，因為它被border分隔，不與它們相鄰。
margin折疊常規(guī)認知：
- margin折疊只發(fā)生在塊級元素上；
- 浮動元素的margin不與任何margin發(fā)生折疊；
- 設(shè)置了屬性overflow且值為非visible的塊級元素，將不與它的子元素發(fā)生margin折疊；
- 絕對定位元素的margin不與任何margin發(fā)生折疊；
- 根元素的margin不與其它任何margin發(fā)生折疊；
對應(yīng)的腳本特性為margin。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	8.0+	40.0+	40.0+	8.0+	40.0+	8.0+	4.4+	28.0+

語法：

取值：

說明：

兼容性：

示例：