任何元素都可以設置border 設置寬高可能無效
行內元素設置padding，margin上下是無效的，左右是有效的
外邊距合並：指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
外邊距合並（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。請看下圖： 
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 * { 7 margin:0; 8 padding:0; 9 border:0; 10 } 11 12 #d1 { 13 width:100px; 14 height:100px; 15 margin-top:20px; 16 margin-bottom:20px; 17 background-color:red; 18 } 19 20 #d2 { 21 width:100px; 22 height:100px; 23 margin-top:10px; 24 background-color:blue; 25 } 26 27 </style> 28 </head> 29 30 <body> 31 32 <div id="d1"> 33 </div> 34 35 <div id="d2"> 36 </div> 37 38 <p>請注意，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）。</p> 39 </body> 40 </html>
51220網站目錄 https://www.51220.cn
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。請看下圖： 
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 * { 7 margin:0; 8 padding:0; 9 border:0; 10 } 11 12 #outer { 13 width:300px; 14 height:300px; 15 background-color:red; 16 margin-top:20px; 17 } 18 19 #inner { 20 width:50px; 21 height:50px; 22 background-color:blue; 23 margin-top:10px; 24 } 25 26 </style> 27 </head> 28 <body> 29 <div id="outer"> 30 <div id="inner"> 31 </div> 32 </div> 33 <p>注釋：請注意，如果不設置 div 的內邊距和邊框，那么內部 div 的上外邊距將與外部 div 的上外邊距合並（疊加）。</p> 34 </body> 35 </html>
盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合並。
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合並： 
如果這個外邊距遇到另一個元素的外邊距，它還會發生合並： 
解決垂直外邊距合並問題
兩個相鄰元素之間的間隔，只有20px；如果我要實現兩元素間的間隔是我理想的間隔，即30px,該如果實現呢？方法有以下兩個：
給最后面的元素加上浮動（left/right）
給最后一個元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解決IE6、7的bug;
.box_a{width:50px; height:50px; background:#f00; margin:10px 0;} .box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}
當子元素都浮動或者display：inline-block時，外邊距不再合並
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .box_a{ 7 width:50px; 8 background:#f00; 9 display: inline-block; 10 } 11 .box_b{ 12 width:50px; 13 background:#f0f; 14 margin:50px;display: 15 inline-block; 16 } 17 18 </style> 19 </head> 20 <body> 21 <div class="box"> 22 <div class="box_a"> 23 24 </div> 25 <div class="box_b"> 26 27 </div> 28 </div> 29 </div> 30 </body> 31 </html>
讓a和b不在同一個bfc內
1 .box{ 2 border:1px solid red; 3 width: 400px; 4 } 5 .a{ 6 7 width: 400px; 8 height: 100px; 9 background: olivedrab; 10 margin-bottom: 100px; 11 } 12 .b{ 13 background: #777; 14 height: 100px; 15 overflow: hidden; 16 margin-top: 100px; 17 } 18 .b-box{ 19 overflow: hidden; 20 } 21 <div class="box"> 22 <div class="a">我是a</div> 23 <div class="b-box"> 24 <div class="b">我是b</div> 25 </div> 26 </div>