盒子的margin屬性
盒子的外邊距margin 指的是當前盒子與其他盒子之間的距離，環繞在盒子周圍的空白區域，屬於不可見的區域，，不會影響到可見框的大小，而是會影響到盒子的位置。
margin屬性可以用來指定盒子外邊框的大小，有兩種方法設置外邊距：第一種單獨屬性分別設置四個方向的外邊距，第二種是使用簡寫屬性同時設置多個方向的外邊距（注意順序），margin 屬性接受任何長度單位，可以是像素px、英寸in、毫米mm或 em
一、單獨屬性設置各個方向外邊距
盒子有四個方向的外邊距。
- margin-top 上外邊距，盒子的上邊框與其他盒子的距離；
- margin-left 左外邊距，盒子的左邊框與其他盒子的距離；
- margin-right 右外邊距，盒子的右邊框與其他盒子的距離；
- margin-bottom 底外邊距，盒子的底邊框與其他盒子的距離。
示例代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin</title> 6 <style type="text/css"> 7 .box1{ 8 width: 200px; 9 height:200px; 10 background-color: #bfa; 11 border:1px solid red; 12 margin-top: 10px; 13 margin-left: 30px; 14 margin-right: 20px; 15 margin-bottom: 40px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="box1"></div> 21 </body> 22 </html>
表現效果
注意：由於頁面中的元素都是靠左靠上對齊。
- 所以設置上，左外邊距的時候，改變的盒子的自身位置；
- 如果設置右，下外邊距的時候，當會改變其他盒子的位置。
二、外邊距簡寫屬性（值復制）同時設置四個方向的外邊距(順序和邊框和內邊距、邊框一樣)
- 指定四個值，分別設置 上10px，右20px，下30px，左40px，按照順時針方向；
- margin:10px 20px 30px 40px;
- 指定三個值，第一個值10px設置給上，第二個20px設置給左和右，第三個30px設置給下外邊距；
- margin:10px 20px 30px;
- 指定兩個值，第一個值10px設置給上下外邊距，第二個值20px設置給左右外邊距；
- margin:10px 20px;
- 指定一個值，四邊外邊距使用同一個值，上下左右都是10像素；
- margin:10px;
設置外邊距，就相當於擴大了元素實際所占頁面的大小。外邊距可以接受任何長度單位，可以是百分數，也可以為負值(如果外邊距設置的是負值，則會把元素往反方向移動)。
- 還可以為 margin 設置一個百分比數值 p{ margin：10px}
百分數是相對於父元素的 width 計算的。上面這個例子為 p 元素設置的外邊距是其父元素的 width 的 10%。
- 當外邊距為正值時 margin：50px
- 當外邊距為負值時 margin：-100px
三、margin還可以設置auto值水平居中
auto只設置給水平方向的margin(水平方向，指的是左右外邊距)
1、如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：
p {margin: auto auto auto 20px;}這樣才能得到你想要的效果。如果只是希望控制元素單邊上的外邊距，可使用單邊外邊距屬性。
2、如果只指定左外邊距或者右外邊距margin為auto，就是左右外邊距設置為最大居中，垂直方向外邊距如果設置為auto，則外邊距設置為0。
左右同時設置為auto，兩側外邊距同時設置為相同的值(可以使子元素在父元素水平居中)
margin:0 auto； 和margin：auto；表達效果一致
四、默認值
Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的默認值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，並將之正確顯示於 Opera 中，那么必須對 body 的 padding 進行自定義。
margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。
但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。
垂直外邊距的重疊（合並）
在網頁中，垂直方向的相鄰外邊距會發生外邊距重疊。所謂外邊距重疊是指兄弟元素之間的相鄰外邊距會取外邊距的最大值而不是外邊距之和。
發生外邊距重疊有兩個要件：⑴必須是相鄰的； ⑵垂直方向上的
實例一：
1、同時設置兩個div的盒子，給上面的盒子設置底面外邊距為100px，給下面的盒子設置頂部外邊距為100px。那么兩個盒子之間的效果還是100px。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin</title> 6 <style type="text/css"> 7 8 .box2{ 9 width: 200px; 10 height:200px; 11 background-color: #234; 12 border:1px solid blue; 13 margin-bottom:100px;} 14 15 .box1{ 16 width: 200px; 17 height:200px; 18 background-color: #bfa; 19 border:1px solid red; 20 margin-top:100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box2"></div> 26 <div class="box1"></div> 27 </body> 28 </html>
2、假設底面盒子的上外邊距設置為200px，那么兩個盒子之間的距離就變成了200px(取最大值)。
3、在相鄰的兩個div元素中間插入一個數字，字母(或者是其他的內容)，使這兩個元素不再相鄰，那么他們之間的距離就是兩個外邊距之和再加上所插入的內容的高度。
實例二：
一個div父元素中，嵌套一個小的div子元素。為子元素設置一個上外邊距，目的是使子元素的位置發生改變，下移。
當給子元素設置了margin-top:100px
預想的效果應該是子元素在父元素中的位置下移100px的。
但是父元素和子元素保持了原來的相對位置一起向下移動了100px。
注意： 如果父子元素的垂直外邊距相鄰了，那么子元素的外邊距會傳遞給父元素。
解決方法：
1、加內容，父元素子元素之間插入一個內容，再設置子元素的margin (原理使父元素和子元素不再是相鄰關系)
2、加內邊距，給父元素設置一個內邊距，但是整個父元素的高度會增加，所以需要在父元素height中減去多出來的部分。(原理，使其不相鄰)
3、加邊框，給父元素設置一個邊框border，再給子元素設置margin (原理，使父元素和子元素不再是相鄰外邊距)
從里面選擇最簡便的方法使用