margin外邊距合併問題

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**：

<divclass=
"box">
<divclass=
"box1">1
div>
<divclass=
"box2">2
div>
div>

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

.box1

.box2

結果為：30px

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

.box1

.box2

結果為：-30px,上面的被覆蓋

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

.box1

.box2

結果為：10px,也就是兩個div之間有10px的間隙。

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

.box1

.box2

結果為：-10px,上面的被覆蓋10px的高度。

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

html**：

<divclass=
"box">
<divclass=
"box1">1
div>
div>

css樣式：

.box1

case1：父級元素不加border

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

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