這里由淺入深向大家描述一下CSS中margin屬性的基本特征和寫法，margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設(shè)置box的marginarea。它可以用來同時設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、重慶小程序開發(fā)公司等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體。

CSS中margin屬性詳解

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

一、margin的基本特性

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

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

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

“AnelementthatisoutsidethescopeoftheCSSformatter,suchasanimage,embeddeddocument,orapplet”
　　從定義中我們可以理解到，置換元素（replacedelement）主要是指img，input，textarea，select，object等這類默認就有CSS格式化外表范圍的元素。進而可知，非置換元素（non-replacedelement）就是除了img，input，textarea，select，object等置換元素以外的元素。#p#
　　margin始終是透明的。

二、margin的基本寫法

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

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

margin的默認值為0，并且margin支持負值。

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

 
 
 
 
  
  
  
  
margin：toprightbottomleft；  
  
  
  
  
 
 
 
 

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

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

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

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

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

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

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

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

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

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

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

【編輯推薦】

1. CSS語法之margin屬性用法詳解
2. rgin-top在Firefox失效解決方法
3. CSS中font-size屬性值四大種類
4. Firefox，IE8中margin-top屬性bug解決方案
5. 專家推薦 DIV CSS表單布局的五個小技巧

網(wǎng)站名稱：CSS中margin屬性的基本特性和寫法
文章鏈接：http://uogjgqi.cn/article/ccsijge.html