這篇文章將為大家詳細講解有關CSS中怎樣使用margin屬性，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、Margin的特性
margin始終是透明的。
margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。即：margin-top、margin-right、margin-bottom、margin-left。
外邊距的 margin-width 的值類型有：auto | length | percentage
也可以使用簡寫的外邊距屬性同時改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針“上右下左”記憶。
并且規范還提供了省略的數值寫法，基本如下：
1、如果margin只有一個值，表示上右下左的margin同為這個值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;
2、如果 margin 只有兩個值，第一個值表示上下margin值，第二個值為左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3、如果margin有三個值，第一個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
4、如果margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;
在實際應用中，個人不推薦使用三個值的margin，一是容易記錯，二是不容易日后修改，一開始如果寫成margin:10px 20px 30px;日后需求改動為上10px，右30px，下30px，左20px，你不得不還是得把這個margin拆開為margin:10px 30px 30px 20px;費力且不討好，不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在，不要為了現在節省倆個字節而讓日后再次開發的成本上升。
垂直外邊距合并問題
別被上面這個名詞給嚇倒了，簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個基本知識。
實際工作中，垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。例子可以查看下面代碼(IE下表現“正?！?，標準瀏覽器下查看出現“bug”)：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外邊距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="firstChild">我其實只是想和我的父元素隔開點距離。</div>
<div class="secondChild"></div>
</div>
</body>
</html>如果按照CSS規范，IE的“良好表現”其實是一個錯誤的表現，因為IE的hasLayout渲染導致了這個“表現良好”的外觀。而其他標準瀏覽器則會表現出“有問題”的外觀。好了，如果你讀過了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個問題了。這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。
再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行。
對于垂直外邊距合并的解決方案上面已經解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。
一般說來這個問題解釋到這里，大多數文章就不會再深入下去了，但作為一名實戰開發者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這么一個解法，其實是一種“修復”，為了“彌補修復”這個父子垂直外邊距合并這個CSS規范“Bug”，而強制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發生這樣的情況還是會忘記這條準則，而且在頁面設計稿里如果不需要border-top加個上邊框，這么一加反而畫蛇添足，為以后修改留下隱患。
為什么一定要用border-top,padding-top去為了這么一個所謂的標準規范而多寫這么一行代碼呢？答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。
用Margin還是用Padding
何時應當使用margin：
需要在border外側添加空白時。
空白處不需要背景（色）時。
上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。
何時應當時用padding：
需要在border內測添加空白時。
空白處需要背景（色）時。
上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px + 20px的padding，將得到35px的空白。
個人認為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。
二、margin 的基本寫法
外邊距的 margin-width 的值類型有：auto | length | percentage
percentage：百分比是由被應用 box 的containing block（注：一個元素的 containing block 是該元素產生的 box(es)在計算位置和大小時參考的一個矩形）的大小所決定。對于 margin-top 和 margin-bottom 也同樣成立。
margin 的默認值為 0，并且 margin 支持負值。
上面我們曾提到屬性 margin 可以用來同時指定 box 的四邊外邊距。如果屬性 margin 有四個值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開始，按照順時針的順序圍繞元素。表達式如下：
margin：top rightright bottombottom left；
四個數值中間以空格分隔。效果等同于：
margin-top:value; margin-right:value; margin-bottom:value; margin-left:value;
并且規范還提供了省略的數值寫法，基本原則如下：
如果沒有 left 值，則使用 right 代替；
如果沒有 bottom 值，則使用 top 代替；
如果沒有 right 值，則使用 top 值代替。
根據這些基本原則，我們可以有三種省略方式，但不管怎樣省略 margin 的數值都會大于等于一個，而 margin 的默認數值是從 top 開始至 left 結束，那么對于省略的具體情況，我們可以從 left 反推理回去。
1、如果 margin 只有三個值，按照值的順序為 margin：top right bottom; 缺少了 left，根據原則，則 left 的值有 right 來代替。margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
2、如果 margin 只有兩個值，按照值的順序為 margin：top right; 缺少了 bottom 和 left，根據原則 left 的值由 right 來代替，bottm 的值由 top 來代替。margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3、如果 margin 只有一個值，按照值的順序為 margin:top; 缺少了 bottom、left 和 right，根據原則 left 的值由 right 來代替，bottom 的值由 top 來代替，right 的值右 top 來代替，也就是說 left 的值也由 top 來代替。margin:10px; 就等于 margin:10px 10px 10px 10px;
三、margin的解析邏輯
目前我們已經了解到了 margin 的基本特性和基本寫法，但對元素 margin 的基本解析邏輯還是很模糊，到底 margin 的 top、right、bottom、left 都是以什么為基準來促使 box model 形成。為了形象，易懂的對 margin 的邏輯進行說明，下面講解的過程中，將引入 W3C 上沒有的參考線的說法。何謂參考線？參考線就是 margin 移動的基準點，此基準點相對于 box 是靜止的。而 margin 的數值，就是 box 相對于參考線的位移量。
在 margin 中 top、right、bottom、left 的參考線并不一致為一類，而是分為了兩類參考線，top 和 left 的參考線屬于一類，right 和bottom 的參考線屬于另一類。那他們到底各以什么為參考線呢？top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。right 以元素本身的 border 右邊為參考線水平向右位移；bottom 以元素本身的border 下邊為參考線垂直向下位移。從上我們可以看到 top 和 left 都是以外元素為參考，而 right 和 bottom 以本元素為參考。上面的位移方向是指 margin 數值為正值時候的情形，如果是負值則位移方向相反。
或許理論聽起來比較枯燥，我們舉例說明一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div {
width:200px;
height:200px;
background:#ccc;
}
</style>
</head>
<body>
<div>外邊距的margin-width的值類型有：auto | length | percentage</div>
</body>
</html>如上代碼，很簡單，為了方便我們看到效果，我們給 div 設置了寬度和高度以及背景色。
現在我們給 div 的樣式加上 margin 屬性，比如：
margin:-10px 20px -30px 40px;
這時候 margin 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關系，div 沒有相連元素，而此時 div 的 containing block 是 body 產生的 block box。則根據上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時以 body 的 content 左邊為參考線進行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進行垂直向上位移 10px（負值和正值的方向相反），下邊距依照現在 div 的 borer 下邊（此時的 div 已經經過上邊距位移過了）垂直向上位移 30px（此時，margin 不會改變 box 的 border 內的物理大小，但會改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考的元素，不是從 box 的物理位置開始的，而是從邏輯位置開始），右邊距依照現在 div 的 borer 右邊（此時的 div 已經經過左邊距位移過了）水平向右位移 20px?；蛟S有朋友問你分析的順序怎么和 margin 表達式中出現的順序不一樣？如果按照 margin 表達式中出現的順序來分析，結果是一樣的，只是為了更好的方便大家的理解而沒有按照表達式的順序來分析。
用 margin 最后的實際顯示大小的到底是怎么樣呢，或許有朋友也比較疑惑，我暫時用邏輯大小和物理大小來區分（其實上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去 margin，也就是包含 border 以內的 box 大小，而邏輯大小，則是 box 通過 margin 解析規則解析后得到的大?。ㄟ@或許可以解釋為什么IE5會錯誤解析盒模型）。在上圖中，box 的實際顯示的寬度等于 box 的邏輯大小，而 box 實際顯示的高度等于 box 的物理大小，這說明 box 實際顯示的大小可能是 box 的邏輯大小，也可能是 box的 物理大小，規則到底是怎樣的——
box 的實際大小 = box 的物理大小 + 正的 margin
這僅對元素本身有效，對于其后面的相關元素，他們則只以 margin 的邏輯大小為準則，進行布局。
有朋友反應，聽得很迷糊，越看越不懂，如果你對具體的理解過程不感興趣的話，那記住下面我總結的結論就可以了，XD
結論：
box 最后的顯示大小等于 box 的 border 及 border 內的大小加上正的 margin 值。而負的 margin 值不會影響 box 的實際大小，如果是負的 top 或 left 值會引起 box 的向上或向左位置移動，如果是 bottom 或 right 只會影響下面 box 的顯示的參考線。
關于“CSS中怎樣使用margin屬性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
