本文向大家介紹一下CSS中margin和padding屬性的用法，margin是指層的邊框以外留的空白，padding是指層的邊框到層的內(nèi)容之間的空白。

margin和padding屬性

margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素里邊。margin是指層的邊框以外留的空白，用于頁邊距或者與其它層制造一個(gè)間距。”10px10px10px10px”分別代表”上右下左”(順時(shí)針方向)四個(gè)邊距，如果都一樣，可以縮寫成”margin:10px;”。如果邊距為零，要寫成”margin:0px;”。注意：當(dāng)值是零時(shí)，除了RGB顏色值0%必須跟百分號(hào)，其他情況后面可以不跟單位”px”。margin是透明元素，不能定義顏色。padding是指層的邊框到層的內(nèi)容之間的空白。和margin一樣，分別指定上右下左邊框到內(nèi)容的距離。如果都一樣，可以縮寫成”padding:0px”。單獨(dú)指定左邊可以寫成”padding-LEFT:0px;”。padding是透明元素，不能定義顏色。

例子h2：

 
 
 

  
  
  
h2{  
  
  
  
font-size:1.5em;  
  
  
  
background-color:#ccc;  
  
  
  
margin:1em;  
  
  
  
padding:3em;  
  
  
  
}  
  
  
  
 
 
 
 

為什么不翻譯margin和padding？

原因一，在漢語中并沒有與之相對(duì)應(yīng)的詞語；原因二：即使有這樣的詞語，由于在編寫CSS代碼時(shí)，必須使用margin和padding，如果我們總用漢語詞語代替其來解釋的話，到了實(shí)際應(yīng)用時(shí)容易混淆margin和padding的概念。

如果有一點(diǎn)Html基礎(chǔ)的話，就應(yīng)該了解一些基本元素(Element)，如p,h1~h6，br，div，li，ul，img等.如果將這些元素細(xì)分，又可以分別歸為***(top-level)元素，塊級(jí)(block-level)元素和內(nèi)聯(lián)(inline)元素。

1.Block-levelelement：指能夠獨(dú)立存在，一般的塊級(jí)元素之間以換行(如一個(gè)段落結(jié)束后另起一行)分隔。常用的塊級(jí)元素包括:p,h1~h6,div,ul等；

2.Inlineelement：指依附其他塊級(jí)元素存在，緊接于被聯(lián)元素之間顯示。而不換行。常用的內(nèi)聯(lián)元素包括：img,span,li,br等；

3.Top-levelelement：包括html，body，frameset，表現(xiàn)如Block-levelelement，屬于高級(jí)塊級(jí)元素。

塊級(jí)元素是構(gòu)成一個(gè)html的主要和關(guān)鍵元素，而任意一個(gè)塊級(jí)元素均可以用Boxmodel來解釋說明。

BoxModel：任意一個(gè)塊級(jí)元素均由content(內(nèi)容)，padding，background(包括背景顏色和圖片)，border(邊框)，margin五個(gè)部分組成。

◆以下說明margin和padding屬性：

margin：

包括margin-top，margin-right，margin-bottom，margin-left，控制塊級(jí)元素之間的距離，它們是透明不可見的，對(duì)于上右下左margin值均為40px，因此代碼為：

 
 
 

  
  
  
h2{  
  
  
  
margin-top:40px;  
  
  
  
margin-right:40px;  
  
  
  
margin-bottom:40px;  
  
  
  
margin-left:40px;  
  
  
  
}  
  
  
  
 
 
 
 

根據(jù)上,右,下,左的順時(shí)針規(guī)則,簡(jiǎn)寫為

 
 
 

  
  
  
h2{  
  
  
  
margin:40px40px40px40px;  
  
  
  
}  
  
  
  
 
 
 
 

當(dāng)上下、左右margin值分別一致,可簡(jiǎn)寫為：

 
 
 

  
  
  
h2{  
  
  
  
margin:40px40px;  
  
  
  
}  
  
  
  
 
 
 
 

前一個(gè)40px代表上下margin值，后一個(gè)40px代表左右margin值。

當(dāng)上下左右margin值均一致，可簡(jiǎn)寫為：

 
 
 

  
  
  
h2{  
  
  
  
margin:40px;  
  
  
  
}  
  
  
  
 
 
 
 

padding：

包括padding-top、padding-right、padding-bottom、padding-left，控制塊級(jí)元素內(nèi)部content與border之間的距離，其代碼簡(jiǎn)寫請(qǐng)參考margin屬性的寫法。

至此，我們已經(jīng)基本了解margin和padding屬性的基本用法。但是，在實(shí)際應(yīng)用中，卻總是發(fā)生一些讓你琢磨不透的事，而它們又或多或少的與margin有關(guān)。

注:當(dāng)你想讓兩個(gè)元素的content在垂直方向(vertically)分隔時(shí)，既可以選擇padding-top/bottom，也可以選擇margin-top/bottom，在此建議你盡量使用padding-top/bottom來達(dá)到你的目的，這是因?yàn)镃SS中存在Collapsingmargins(折疊的margins)的現(xiàn)象。
 

【編輯推薦】

1. DIV+CSS中padding和margin屬性用法
2. IE6.0對(duì)padding的解讀分析
3. DIV+CSS網(wǎng)頁錯(cuò)位診斷和解決方法
4. Float構(gòu)建三欄DIV CSS網(wǎng)頁布局
5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式

當(dāng)前標(biāo)題：CSS中margin和padding屬性的用法
新聞來源：http://uogjgqi.cn/article/dphojgi.html