margin和padding的用法:

（1）padding (margin) -left:10px; 　　　　　　　　 左內 (外) 邊距
（2）padding (margin) -right:10px; 　　　　　　　 右內 (外) 邊距
（3）padding (margin) -top:10px; 　　　　　　　　上內 (外) 邊距
（4）padding (margin) -bottom:10px; 　　　　　　 下內 (外) 邊距
（5）padding (margin) :10px; 　　　　　　　　　 四邊統一內 (外) 邊距
（6）padding (margin) :10px 20px; 　　　　　　　 上下、左右內 (外) 邊距
（7）padding (margin) :10px 20px 30px; 　　　　 上、左右、下內 (外) 邊距
（8）padding (margin) :10px 20px 30px 40px; 　　 上、右、下、左內 (外) 邊距

margin的用法說明:

（1）需要在border外側添加空白時，

（2）空白處不需要有背景（色）時，

（3）上下相連的兩個盒子之間的空白需要相互抵消時，比如15px+20px的margin，將得到20px的空白。

padding的用法說明:

（1）需要在border內側添加空白時（往往是文字與邊框距離的設置），

（2）空白處需要背景（色）時，

（3）上下相連的兩個盒子之間的空白希望等於兩者之和時，比如15px+20px的padding，將得到35px的空白。

margin和padding的區別:

margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內邊距，是盒子的邊與盒子內部元素的距離。(margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相幹；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。)

maegin的bug處理方式:

1、瀏覽器在默認狀態下會對margin設置初值，所以在沒有對div設置margin的情況下，div會出現一定的間隔；

2、margin-top會經常出現bug，所以推薦只在兄弟元素之間使用margin，而在父子元素之間使用padding；

3、豎直方向上會出現margin值疊加情況，此時margin的取值方式是取上下兩個元素之間較大的margin值；

4、IE6在滿足以下四個條件的情況下會觸發橫向的雙倍邊距：（1）元素是浮動的（2）元素必須要有橫向的margin（3）元素必須是塊元素|（4）瀏覽器是ie6

6、當兩個盒子為兄弟關系時,相鄰的地方同時使用了外邊距，只取較大的那個外邊距值。

padding的bug處理方式:

1、當兩個盒子套一起時,給藍色盒子寫padding-top:50px;時,兩個盒子之間變不會產生上距離.而是給藍色盒子的高添加了50像素.(見,圖2)這時，就需要給紅色添加一個盒子。box-sizing:border-box

2、padding不能給負值.

margin和padding的用法與區別--以及bug處理方式