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不能给负值.