?
This document uses PHP Chinese website manual Release
語(yǔ)法：
margin：[ <length> | <percentage> | auto ]{1,4}
默認(rèn)值：看每個(gè)獨(dú)立屬性
適用于：所有元素，除非 table | inline-table | table-caption 的表格類(lèi)元素之外
繼承性：無(wú)
動(dòng)畫(huà)性：是
計(jì)算值：看每個(gè)獨(dú)立屬性
相關(guān)屬性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
取值：
auto：水平（默認(rèn)）書(shū)寫(xiě)模式下，margin-top/margin-bottom計(jì)算值為0，margin-left/margin-right取決于可用空間。詳見(jiàn)：margin系列之keyword auto
<length>：用長(zhǎng)度值來(lái)定義外補(bǔ)白?？梢詾樨?fù)值
<percentage>：用百分比來(lái)定義外補(bǔ)白。水平（默認(rèn)）書(shū)寫(xiě)模式下，參照其包含塊 width 進(jìn)行計(jì)算，其它情況參照 height ，可以為負(fù)值
說(shuō)明：
檢索或設(shè)置對(duì)象四邊的外延邊距。
如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四邊。
如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
非替代(non-Replaced)行內(nèi)元素可以使用該屬性設(shè)置左、右兩邊的外補(bǔ)?。蝗粢O(shè)置上、下兩邊的外補(bǔ)丁，必須先使該對(duì)象表現(xiàn)為塊級(jí)或內(nèi)聯(lián)塊級(jí)。
外延邊距始終透明。
某些相鄰的margin會(huì)發(fā)生合并，我們稱(chēng)之為margin折疊：
示例：
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>這是一個(gè)標(biāo)題</h2>
<div>
<h2>這是又一個(gè)標(biāo)題</h2>
</div>本例中，第一個(gè)h2的margin-bottom（10px），div的margin-top（20px），第二個(gè)h2的margin-top（10px）將被合并，它們之間的margin間隙最后是（20px），即取三者之間最大的那個(gè)值。
如果給上例中的div加上border的話(huà)：
示例：
h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
<h2>這是一個(gè)標(biāo)題</h2>
<div>
<h2>這是又一個(gè)標(biāo)題</h2>
</div>本例中，第一個(gè)h2的margin-bottom（10px），div的margin-top（20px）將被合并，但第二個(gè)h2的margin-top不與它們合并，因?yàn)樗籦order分隔，不與它們相鄰。
margin折疊常規(guī)認(rèn)知：
margin折疊只發(fā)生在塊級(jí)元素上；
浮動(dòng)元素的margin不與任何margin發(fā)生折疊；
設(shè)置了屬性overflow且值不為visible的塊級(jí)元素，將不與它的子元素發(fā)生margin折疊；
絕對(duì)定位元素的margin不與任何margin發(fā)生折疊；
根元素的margin不與其它任何margin發(fā)生折疊；
對(duì)應(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+ |
實(shí)例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>margin_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</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)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例