margin屬性：

所有瀏覽器都支援 margin 屬性。這個簡寫屬性設定一個元素所有外邊距的寬度，或者設定各邊上外邊距的寬度，也可以分別設定個邊的外邊距。margin是一個複合屬性，包括：margin-top、margin-bottom、margin-left、margin-right  

 基本使用：

例如：margin：10px 20px 40px 30px;----表示：上/右/下/左外邊的大小分別是10、20、40、30

             margin：10px 20px 40px ;----表示：上/左右/下,上、右、下、左外邊的大小分別是10、20、40、20

     margin： 20px 30px;----表示：上下/左右，上、右、下、左外邊的大小分別是20、30、20、30

     margin：10px ;----表示：上、右、下、左外邊的大小都是10。

合併問題：

塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。

塊級元素的垂直相鄰外邊距會合並：出現合併的情況只有一種設定：上面的塊級元素設定margin-bottom；下面的塊級元素設定margin-top。兩個的屬性值可正可負。

case1：當兩個屬性值均為正值或者均為負值時，取絕對值較大的那個數值。若最終結果為正值，那這兩個塊級元素之間有空隙；若最終結果為負值，那這兩個塊級元素之間出現覆蓋，下面的會覆蓋上面的，覆蓋距離為最終結果的絕對值大小。

case2：當兩個屬性值有正有負時，取兩個屬性值之和，作為最終的結果。若最終結果為正值，那這兩個塊級元素之間有空隙；若最終結果為負值，那這兩個塊級元素之間出現覆蓋，下面的會覆蓋上面的，覆蓋距離為最終結果的絕對值大小。

html程式碼：

<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
</div>

例1：兩個屬性值均為正值，

.box1{
    background:#26a9f9;
    margin-bottom
 
: 30px;
}
.box2{
    background:#ff4ef8;
    margin-top:20px;
}

結果為：30px

例2：兩個屬性值均為負值，

.box1{
    background:#26a9f9;
    margin-bottom: -30px;
}
.box2{
    background:#ff4ef8;
    margin-top:-20px;
}

例2：兩個屬性值一正一負，case1：

.box1{
    background:#26a9f9;
    margin-bottom: 30px;
}
.box2{
    background:#ff4ef8;
    margin-top:-20px;
}

例2：兩個屬性值兩個屬性值一正一負，case2：

.box1{
    background:#26a9f9;
    margin-bottom: -30px;
}
.box2{
    background:#ff4ef8;
    margin-top:20px;
}

二：設定margin-top時，父級元素加border和不加border的效果。注意：父級元素加border和父級元素設定float的效果是一樣的。

html程式碼：

<div class="box">
    <div class="box1">1</div>
</div>

.box1{
    width:100px;
    height:100px;
    background:#26a9f9;
    margin-top:40px;
    margin-left:20px;
}

case1：父級元素不加border

case2：父級元素加border（或者浮動）效果圖：

我在學習的過程中，一開始並沒有總結過margin的使用過程中要注意的事項。只是會用而已。突然被問起這個，有點矇蔽的趕腳，今天總結了一下，希望對以後初學者有幫助，也是對自己的警示。學習的過程中，學會和善於總結是多麼的重要。先寫到這，後續有內容會繼續更新的。加油！