?
This document uses PHP Chinese website manual Release
語法：
margin：[ <length> | <percentage> | auto ]{1,4}
默認(rèn)值：看每個獨(dú)立屬性
適用于：所有元素，除非 table | inline-table | table-caption 的表格類元素之外
繼承性：無
動畫性：是
計算值：看每個獨(dú)立屬性
相關(guān)屬性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
取值：
auto：水平（默認(rèn)）書寫模式下，margin-top/margin-bottom計算值為0，margin-left/margin-right取決于可用空間。詳見：margin系列之keyword auto
<length>：用長度值來定義外補(bǔ)白?？梢詾樨?fù)值
<percentage>：用百分比來定義外補(bǔ)白。水平（默認(rèn)）書寫模式下，參照其包含塊 width 進(jìn)行計算，其它情況參照 height ，可以為負(fù)值
說明：
檢索或設(shè)置對象四邊的外延邊距。
如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
非替代(non-Replaced)行內(nèi)元素可以使用該屬性設(shè)置左、右兩邊的外補(bǔ)??；若要設(shè)置上、下兩邊的外補(bǔ)丁，必須先使該對象表現(xiàn)為塊級或內(nèi)聯(lián)塊級。
外延邊距始終透明。
某些相鄰的margin會發(fā)生合并，我們稱之為margin折疊：
示例：
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>這是一個標(biāo)題</h2>
<div>
<h2>這是又一個標(biāo)題</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>這是一個標(biāo)題</h2>
<div>
<h2>這是又一個標(biāo)題</h2>
</div>本例中，第一個h2的margin-bottom（10px），div的margin-top（20px）將被合并，但第二個h2的margin-top不與它們合并，因為它被border分隔，不與它們相鄰。
margin折疊常規(guī)認(rèn)知：
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 | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
實例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>margin_CSS參考手冊_web前端開發(fā)參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{margin:20px;background:#eee;}
</style>
</head>
<body>
<div class="test">注意我距上、右、下、左的距離</div>
</body>
</html>
運(yùn)行實例 ?
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例