6.30日音訊,margin:0auto的含義詳解。margin是我們平常用的很多的一個(gè)屬性，但是它的一些用法會(huì)產(chǎn)生一些瀏覽器的不兼容如ie6的雙倍邊距等，下面我們就來(lái)看一下margin:auto與margin:0auto;有什么區(qū)別以及它們的關(guān)聯(lián)和不同。
margin:auto=margin:autoautoautoauto;
margin:0auto=margin:0auto0auto;
margin:nmpq表示該元素上外邊距為n，右外邊距為m，下外邊距為p，左外邊距為q，即margin:上右下左，逆時(shí)針一圈。
詳情了解margin教程。
margin后面是有4個(gè)參數(shù)的。
例如：margin:1px2px3px4px
分別表示上（1px）、右(2px)、下(3px)、左(4px)。
如果只寫(xiě)2個(gè)參數(shù)的話，比如：margin：1px2px
那么著是代表上下都為1px左右都為2px.
至于居中，很明顯，margin:0auto是標(biāo)準(zhǔn)的寫(xiě)法！常常我們使用margin:0auto讓div盒子布局居中。
margin:auto這個(gè)是代表四外邊距自動(dòng)，當(dāng)然此CSSmargin默認(rèn)為auto，所以常常都不用設(shè)置auto這個(gè)值，只有確定前面對(duì)對(duì)象設(shè)置了margin值，此時(shí)需要重置時(shí)候使用margin:auto
margin用于設(shè)置對(duì)象標(biāo)簽之間距離間隔，比如2個(gè)上下排列的DIV盒子，我們就可以使用margin樣式實(shí)現(xiàn)上下2個(gè)盒子間距。Margin呈現(xiàn)是位于對(duì)象邊框外側(cè)，緊貼于邊框，marign與padding位置卻相反csspadding卻是緊貼邊框位于邊框內(nèi)側(cè)。
DIVCSS外邊距指CSS屬性單詞margin，margin是設(shè)置對(duì)象四邊的外延邊距，沒(méi)有背景顏色也無(wú)顏色。
1、margin語(yǔ)法
Margin:10px
Margin的值是數(shù)字+html單位，同時(shí)也可以為auto（自動(dòng)、自適應(yīng)）
2、應(yīng)用結(jié)構(gòu)
Div{margin:10px}
設(shè)置div對(duì)象四邊間距為10px
3、Margin說(shuō)明
margin是設(shè)置對(duì)象外邊距外延邊距離。
margin的值有三種情況，可以為正整數(shù)和負(fù)整數(shù)并加單位如PX像素（margin-left:20px）；可以為auto自動(dòng)屬性(margin-left:auto自動(dòng))；可以為百分比（%）值（margin-left:3%）。
Margin延伸（單獨(dú)設(shè)置四邊間距屬性單詞）
margin-left對(duì)象左邊外延邊距（margin-left:5px;左邊外延距離5px）
margin-right對(duì)象右邊外延邊距（margin-right:5px;右邊外延距離5px）
margin-top對(duì)象上邊外延邊距（margin-top:5px;上邊外延距離5px）
margin-bottom對(duì)象下邊外延邊距（margin-bottom:5px;下邊外延距離5px）
常見(jiàn)margin使用場(chǎng)景
4、margin實(shí)際應(yīng)用地方
兩個(gè)布局之間距離設(shè)置。
如上圖中“CSS手冊(cè)”和“DIVCSS研教室”黃顏色的背景之間空隙（背景土紅）。
二、cssmargin縮寫(xiě)簡(jiǎn)寫(xiě)-TOP
margin屬性CSS樣式，如遇到上下、左右、上下左右等情況我們可以縮寫(xiě)簡(jiǎn)寫(xiě)優(yōu)化。
你可能需要了解：CSS優(yōu)化-CSS壓縮：
你可能需要了解：HTML優(yōu)化-HTML代碼優(yōu)化壓縮：
1、只有上下情況縮寫(xiě)
原始：margin-top:5px;margin-bottom:6px
縮寫(xiě)簡(jiǎn)寫(xiě)為：margin:5px06px0或margin:5pxauto6pxauto
2、只有左右情況縮寫(xiě)
原始：margin-left:5px;margin-right:6px
縮寫(xiě)簡(jiǎn)寫(xiě)為：margin:06px05px或margin:auto6pxauto5px
3、只有三邊情況縮寫(xiě)
原始：margin-top:5px;margin-bottom:6px;margin-left:4px
縮寫(xiě)：margin:5px06px4px或margin:5pxauto6px4px
4、四邊相同值縮寫(xiě)
原始：margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px
縮寫(xiě)：margin:5px;
5、四邊不同值縮寫(xiě)
原始：margin-top:5px;margin-bottom:6px;margin-left:7px;margin-right:8px
縮寫(xiě)：margin:5px8px6px7px;
6、四邊其中上下值和左右值各相同縮寫(xiě)
上下相同、左右相同原始：margin-top:5px;margin-bottom:5px;margin-left:7px;margin-right:7px
縮寫(xiě)：margin:5px7px;
Margin簡(jiǎn)寫(xiě)分析圖：
cssdivmargin樣式簡(jiǎn)寫(xiě)語(yǔ)法應(yīng)用分析圖
三、常用的margin樣式-TOP
1、用margin設(shè)置對(duì)象盒子間距
我們常用margin設(shè)置2個(gè)盒子之間距離，無(wú)論上下左右的距離我們均可以利用margin實(shí)現(xiàn)間隔。
實(shí)際可用margin地方示圖
2、利用margin實(shí)現(xiàn)布局居中，基礎(chǔ)單詞：
marign:0auto;
即可實(shí)現(xiàn)對(duì)象居中，但需要一個(gè)條件，那就是該對(duì)象上級(jí)一定要設(shè)置text-align:center內(nèi)容居中屬性樣式。有的瀏覽器body標(biāo)簽不設(shè)置text-align:center內(nèi)容居中樣式，其下級(jí)包含對(duì)象設(shè)置了margin:0auto也會(huì)讓其布局居中，但為了兼容各大瀏覽器建議對(duì)body設(shè)置一個(gè)text-align:center屬性樣式，這里divcss5提供一個(gè)css初始化模板為DIVCSS布局時(shí)候無(wú)需重復(fù)設(shè)置csstext-align:center等初始化樣式屬性。
四、cssmargin普通案例-TOP
DIVCSS5設(shè)置2個(gè)盒子，為了體現(xiàn)margin作用，我們對(duì)其2盒子設(shè)置cssborder邊框、一定css寬度和css高度。
1、margin用法css代碼
.divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1pxsolid#F00}
.divcss5-bottom{margin-top:10px}
2、html代碼片段
<divclass="divcss5-top">上對(duì)象</div>
<divclass="divcss5-bottom">下對(duì)象，我們?cè)O(shè)置了margin-top為10px間距</div>
3、mairgin應(yīng)用案例截圖
margin實(shí)例實(shí)踐案例效果圖
從上案例我們分析出margin是設(shè)置對(duì)象（比如div盒子、span盒子等）之間間距，并體現(xiàn)出margin是存在與對(duì)象盒子邊框外側(cè)。
五、cssmargin總結(jié)
Margin樣式是設(shè)置對(duì)象與對(duì)象之間間距，單獨(dú)設(shè)置一邊的間距我們可以使用margin-left、margin-right、margin-top、margin-bottom樣式屬性，margin是設(shè)置盒子對(duì)象之間間距，一般設(shè)置時(shí)候注意margin簡(jiǎn)寫(xiě)優(yōu)化。多實(shí)踐并觀察案例理解了margin作用即可很快上手使用margin。
