html中padding和margin的区别和用法与存在的bug消除

关于margin：

在需要border外侧添加距离时。

空白处不需要背景时。

相连的两个部分的地方需要加外边的边距时使用。

关于padding：

在需要border内侧添加距离时。

空白处需要背景时。

相连的两个部分的地方需要加内部的边距时使用。

IE6中双边距Bug：

　　发生场合：当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。

　　解决方法：是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。

IE6中浮动元素3px间隔Bug：

　　发生场合：发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。

　　解决方法：右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。

IE6/7负margin隐藏Bug：

　　发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时，超出父元素部分不可见。

　　解决方法：去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;

IE6/7下ul/ol标记消失bug：

　　发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。

　　解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。

IE6/7下margin与absolute元素重叠bug：

　　发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

　　解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。

IE6/7/8下auto margin居中bug：

　　发生场合：给block元素设置margin auto无法居中

　　解决方法：出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决，但根据本人亲测，加 with此种方法是无效的，如果没有Doctype即使给元素添加width也无法让block元素居中。

IE8下input[button | submit] 设置margin:auto无法居中bug：

　　发生场合：ie8下，如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

　　解决方法：可以给为input加上宽度

IE8百分比padding垂直margin bug：

　　发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样。

　　解决方法：给父元素加一个overflow:hidden/auto。