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

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處理方式:

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

二、margin-top會常常出現bug，因此推薦只在兄弟元素之間使用margin，而在父子元素之間使用padding；

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

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

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

 

padding的bug處理方式:

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

二、padding不能給負值.