本篇內(nèi)容介紹了“CSS中margin屬性的用法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鎮(zhèn)平ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鎮(zhèn)平網(wǎng)站制作公司

CSS中margin屬性由淺入深詳解

margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（boxmodel）的基礎(chǔ)屬性。

一、margin的基本特性

margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來(lái)設(shè)置box的marginarea。屬性margin可以用來(lái)同時(shí)設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。

margin屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類(lèi)型（不包括table-caption,tableandinline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replacedinlineelement）不起作用。

或許有朋友對(duì)非置換元素（non-replacedelement）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replacedelement），也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：

ExampleSourceCode

“AnelementthatisoutsidethescopeoftheCSSformatter,  suchasanimage,embeddeddocument,orapplet”

從定義中我們可以理解到，置換元素（replacedelement）主要是指img，input，textarea，select，object等這類(lèi)默認(rèn)就有CSS格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replacedelement）就是除了img，input，textarea，select，object等置換元素以外的元素。
margin始終是透明的。

二、margin的基本寫(xiě)法

外邊距的margin-width的值類(lèi)型有：auto|length|percentage

percentage：百分比是由被應(yīng)用box的containingblock（注：一個(gè)元素的containingblock是該元素產(chǎn)生的box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形，詳細(xì)閱讀可看：《ContainingBlock》）的大小所決定。對(duì)于margin-top和margin-bottom也同樣成立。

margin的默認(rèn)值為0，并且margin支持負(fù)值。

上面我們?cè)岬綄傩詍argin可以用來(lái)同時(shí)指定box的四邊外邊距。如果屬性margin有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開(kāi)始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：

ExampleSourceCode

margin：toprightbottomleft；

并且規(guī)范還提供了margin省略的數(shù)值寫(xiě)法，基本原則如下：

1.如果沒(méi)有l(wèi)eft值，則使用right代替；

2.如果沒(méi)有bottom值，則使用top代替；

3.如果沒(méi)有right值，則使用top值代替。

根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略margin的數(shù)值都會(huì)大于等于一個(gè)，而margin的默認(rèn)數(shù)值是從top開(kāi)始至left結(jié)束，那么對(duì)于省略的具體情況，我們可以從left反推理回去。

1.如果margin只有三個(gè)值，按照值的順序?yàn)閙argin：toprightbottom;缺少了left，根據(jù)原則，則left的值有right來(lái)代替。

margin:10px20px30px;就等于margin:10px20px30px20px;

2.如果margin只有兩個(gè)值，按照值的順序?yàn)閙argin：topright;缺少了bottom和left，根據(jù)原則left的值由right來(lái)代替，bottm的值由top來(lái)代替。

margin:10px20px;就等于margin:10px20px10px20px;

3.如果margin只有一個(gè)值，按照值的順序?yàn)閙argin:top;缺少了bottom、left和right，根據(jù)原則left的值由right來(lái)代替，bottom的值由top來(lái)代替，right的值右top來(lái)代替，也就是說(shuō)left的值也由top來(lái)代替。

margin:10px;就等于margin:10px10px10px10px;

三、margin的解析邏輯

目前我們已經(jīng)了解到了margin的基本特性和基本寫(xiě)法，但對(duì)元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什么為基準(zhǔn)來(lái)促使boxmodel形成。為了形象，易懂的對(duì)margin的邏輯進(jìn)行說(shuō)明，下面講解的過(guò)程中，將引入W3C上沒(méi)有的參考線(xiàn)的說(shuō)法。何謂參考線(xiàn)？參考線(xiàn)就是margin移動(dòng)的基準(zhǔn)點(diǎn)，此基準(zhǔn)點(diǎn)相對(duì)于box是靜止的。而margin的數(shù)值，就是box相對(duì)于參考線(xiàn)的位移量。

在margin中top、right、bottom、left的參考線(xiàn)并不一致為一類(lèi)，而是分為了兩類(lèi)參考線(xiàn)，top和left的參考線(xiàn)屬于一類(lèi)，right和bottom的參考線(xiàn)屬于另一類(lèi)。那他們到底各以什么為參考線(xiàn)呢？top以containingblock的content上邊或者垂直上方相連元素margin的下邊為參考線(xiàn)垂直向下位移；left以containingblock的content左邊或者水平左方相連元素margin的右邊為參考線(xiàn)水平向右位移。right以元素本身的border右邊為參考線(xiàn)水平向右位移；bottom以元素本身的border下邊為參考線(xiàn)垂直向下位移。從上我們可以看到top和left都是以外元素為參考，而right和bottom以本元素為參考。上面的位移方向是指margin數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。

或許理論聽(tīng)起來(lái)比較枯燥，我們舉例說(shuō)明一下：

ExampleSourceCode