margin在中文中我們翻譯成外邊距或者外補(bǔ)白，本文向大家介紹一下CSS中margin屬性的用法，希望對你的學(xué)習(xí)有所幫助。

前進(jìn)網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,前進(jìn)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為前進(jìn)成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個(gè)售后服務(wù)好的前進(jìn)做網(wǎng)站的公司定做！

CSS中margin屬性由淺入深詳解

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

一、margin的基本特性

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

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

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

ExampleSourceCode

 
 
 

  
  
  
“AnelementthatisoutsidethescopeoftheCSSformatter, 
  
  
  
suchasanimage,embeddeddocument,orapplet” 
 
 
 

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

二、margin的基本寫法

　　外邊距的margin-width的值類型有：auto|length|percentage

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

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

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

ExampleSourceCode

 
 
 

  
  
  
margin：toprightbottomleft； 
 
 
 

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

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

2.如果沒有bottom值，則使用top代替；

3.如果沒有right值，則使用top值代替。

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

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

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

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

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

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

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

三、margin的解析邏輯

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

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

　　或許理論聽起來比較枯燥，我們舉例說明一下：

ExampleSourceCode

 
 
 

  
  
  

  
  
  
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">