一、什么是外邊距

外邊距很好理解，就是指邊框以外的距離，可以表示和其它元素之間的距離，使用margin屬性來設(shè)置。

圖1 外邊距

二、屬性設(shè)置

1、單獨(dú)寫法

margin-top: 上外邊距;
margin-right: 右外邊距;
margin-bottom: 下外邊距;
margin-left: 左外邊距;

• 外邊距可以有負(fù)值
• margin-left和margin-top可以改變這個(gè)元素本身的位置
• margin-right 和margin-bottom 不能改變這個(gè)元素本身的位置，只能改變這個(gè)元素右邊和下邊元素的位置

2、復(fù)合寫法

margin后面可跟多個(gè)值，中間用空格分離，含義如下：

margin:（一個(gè)值） 上下左右外邊距均為這個(gè)值
margin:（兩個(gè)值）第一個(gè)值為上下外邊距，第二個(gè)值為左右外邊距
margin:（三個(gè)值）第一個(gè)值為上外邊距，第二個(gè)值為左右外邊距，第三個(gè)值為下外邊距。
margin:（四個(gè)值）第一個(gè)值為上外邊距，第二個(gè)值為右外邊距，第三個(gè)值為下外邊距，第四個(gè)值為左外邊距。（從上開始順時(shí)針轉(zhuǎn)一圈）

三、使用示例

（1）首先我們放置三個(gè)盒子，顏色不同，寬高均為100px。

圖3-1 三個(gè)盒子

（2）我們給中間的橙色盒子加上一個(gè)10px的上外邊距，可以看到橘黃色的盒子向下移動(dòng)了10px，上面多了一個(gè)上外邊距。

圖3-2 上外邊距

        .d2{
            background: orange;
            margin-top: 10px;
        }

（3）接下來我們?nèi)サ羯贤膺吘?，改成給橘黃色盒子加上一個(gè)10px的下外邊距，發(fā)現(xiàn)橘黃色盒子并沒有移動(dòng)，移動(dòng)的是下面的黃色盒子，所以margin-top和margin-bottom的用法一定要區(qū)分開。

圖3-3 下外邊距

        .d2{
            background: orange;
            margin-bottom: 10px;
        }

• margin-left和margin-top可以改變這個(gè)元素本身的位置
• margin-right 和margin-bottom 不能改變這個(gè)元素本身的位置，只能改變這個(gè)元素右邊和下邊元素的位置

（4）外邊距可以是賦值，我們給橘黃色盒子添加一個(gè)-50px的上外邊距，可以看到橘黃色盒子向上移動(dòng)了。

圖3-4 負(fù)的上外邊距

        .d2{
            background: orange;
            margin-top: -50px;
        }

四、margin使用中的兩個(gè)問題

1、盒子塌陷問題

（1）我們放置一個(gè)大的紅色盒子，里面包著一個(gè)小的橘黃色盒子，當(dāng)我們?yōu)殚冱S色盒子添加了一個(gè)50px的上外邊距的時(shí)候，本來應(yīng)該只是小盒子多了上外邊距然后導(dǎo)致向下移動(dòng)。結(jié)果發(fā)現(xiàn)，效果就好像是給大盒子加了上外邊距一樣，大盒子跟著小盒子一起塌陷下去了，并不是我們想要的效果。

圖4-1-1 理想效果

圖4-1-2 實(shí)際效果

        .d1{
           width:200px;
           height:200px;
           background: red; 
        }
        .d2{
            width:100px;
            height:100px;
            background: orange;
            margin-top: 50px;
        }

    <div class="d1">
        <div class="d2"></div>
    </div>

（2）如果大盒子有邊框，或者橘黃色盒子上面還有元素，情況會(huì)是正常的，可以達(dá)到我們想要的效果，不會(huì)出現(xiàn)塌陷：

圖4-1-3 大盒子有邊框

圖4-1-4 上方有其它元素

（3）解決方法
在外部元素上面沒有邊框，其內(nèi)部上方也沒有其它元素?fù)踔臅r(shí)候，給其子元素設(shè)置上外邊距，會(huì)導(dǎo)致塌陷，達(dá)不到想要的效果。目前我們只能在遇到這種情況的時(shí)候盡量使用padding去設(shè)置，不要使用margin，當(dāng)然還有很多別的解決方法，就不細(xì)說啦。

2、margin-top和margin-bottom相遇問題

我們放置兩個(gè)盒子，給上面的盒子添加一個(gè)100px的下外邊距，給下面的盒子添加一個(gè)50px的上外邊距，最終效果如圖所示，兩個(gè)盒子最后中間只隔了100px：

圖4-2 外邊距重合

        .d1{
           width:100px;
           height:100px;
           background: red; 
           margin-bottom:100px;
        }
        .d2{
            width:100px;
            height:100px;
            background: orange;
            margin-top:50px;
        }

    <div class="d1"></div>
    <div class="d2"></div>

當(dāng)下方元素的上外邊距遇到上方元素的下外邊距，是會(huì)發(fā)生重合效果的，設(shè)置的時(shí)候一定要注意。

五、注意事項(xiàng)

塊元素才可以設(shè)置上下左右外邊距，內(nèi)聯(lián)元素設(shè)置上下外邊距是無效的。

• 相關(guān)文章
  【css】?jī)?nèi)邊距padding的屬性和使用方法
  http://www.itdecent.cn/p/f3de8c5e7d5f
  【css】邊框border的屬性和使用方法
  http://www.itdecent.cn/p/12f9bc926055