margin，是透明的，在它設(shè)置的值的范圍內(nèi)，父元素的背景色或背景圖片均不受影響，能夠完整的呈現(xiàn)給用戶看到。margin屬性通過(guò)單獨(dú)的屬性對(duì)其上、右、下、左依次進(jìn)行賦值，我們常見(jiàn)的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道：margin:10px 15px 3px;什么意思嗎？你以為它的表達(dá)意思是：margin:10px 15px 3px 0px;嗎？？那我來(lái)告訴你，錯(cuò)誤：它的表達(dá)意思是margin:10px 15px 3px 15x;呵呵！great。這個(gè)才是正確的。在實(shí)際應(yīng)用中，或者閱讀別人代碼的時(shí)候不要理解錯(cuò)誤或者，沒(méi)有看到過(guò)這個(gè)，就隨便猜測(cè)作者的想法。
注釋：允許使用負(fù)值。
例子 1
margin:10px 5px 15px 20px;上外邊距是 10px
右外邊距是 5px
下外邊距是 15px
左外邊距是 20px
例子 2
margin:10px 5px 15px;上外邊距是 10px
右外邊距和左外邊距是 5px
下外邊距是 15px
例子 3
margin:10px 5px;上外邊距和下外邊距是 10px
右外邊距和左外邊距是 5px
margin垂直外邊距不兼容標(biāo)準(zhǔn)？
實(shí)際工作中，垂直外邊距合并問(wèn)題常見(jiàn)于第一個(gè)子元素的margin-top會(huì)頂開(kāi)父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問(wèn)題，IE下反而表現(xiàn)良好。例子可以查看下面代碼(IE下表現(xiàn)“正常”，標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”)有代碼有真相：
<html xmlns=" <head>
<title>垂直外邊距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="firstChild">我其實(shí)只是想和我的父元素隔開(kāi)點(diǎn)距離。</div>
<div class="secondChild"></div>
</div>
</body>
</html>
你來(lái)運(yùn)行一下是不是感覺(jué)，這個(gè)在IE中顯示正常？而在其他對(duì)css教程2高度兼容的firefox下顯示異常？？我來(lái)告訴你，這是因?yàn)镮EIE的hasLayout渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問(wèn)題”的外觀。如果按照css規(guī)范來(lái)說(shuō)，IE的表現(xiàn)是錯(cuò)誤的，而FirfFox、Chrome、Opera、Sarfi等主流瀏覽器則解析的符合css規(guī)范。
舉個(gè)例子來(lái)說(shuō)：父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己 “領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行（雖然它的值比“真龍”的值大）。
用Margin還是用Padding
對(duì)于這個(gè)問(wèn)題，很多人問(wèn)過(guò)我，他們說(shuō)，padding和margin為什么要分開(kāi)用，它們的區(qū)別也不大，達(dá)到的效果也不差，為什么它們是兩種定義？很多人會(huì)容易弄混淆，特別是新手，一般都是新手問(wèn)我這個(gè)問(wèn)題。
下面我們來(lái)說(shuō)下，為什么要區(qū)別來(lái)用，padding和margin：
當(dāng)我們想要在子元素使用背景，而父元素不適應(yīng)背景，達(dá)到圖片“頂住”，文字“不頂住”間隔一段距離的時(shí)候要用padding；
當(dāng)我們讓子元素邊框要頂住父元素，而覆蓋父元素背景圖片或背景色的時(shí)候使用padding；
當(dāng)我們希望讓子元素和父元素有點(diǎn)距離，但不影響父元素背景圖片展示的時(shí)候用margin；
