双倍边距bug在IE6中经常出现，在IE7很少遇见
今天做一个活动页面的时候在IE7遇到了双倍边距困扰，倒弄好半天没找到原因，在大师指点下找到了原因：
正常效果图如下：
要实现4个图片摆放效果：
情况1、我把头像和兑换图片放到一个box里面
box的css .box{width:65px; height:80px; float:left; margin:5px 20px 0px; }/*红色部分是造成bug的关键*/
头像的css .photo{ width:50px; height:50px; background:url(images/photo.png) no-repeat; margin:0 auto; }
兑换按钮css .btn{ width:64px; height:20px; background:url(images/btn.png) no-repeat; margin:5px 0; border:none; cursor:pointer; }
这些css写出的效果在IE8和火狐能正常显示，但在IE7下效果就变成下面错位效果了
情况2、如果把box的css修改成下面情况（添加0px就可以解决IE7双倍边距的问题）
.box{width:65px; height:80px; float:left; margin:5px 20px 0px 0px; }/*添加了0px*/
情况3、如果把box的css修改成下面情况(（添加display:inline就可以解决IE7双倍边距的问题）)
.box{width:65px; height:80px; float:left; margin:5px 20px 0px ; display:inline;}/*添加了display:inline;*/
总结：
当我们需要让float和margin搭档的时候如果出现错位不能实现正常效果，请你把 display:inline 找来帮忙检查下看能否解决问题
再加点关于margin的话题
当遇到盒模型的时候，内部盒子如果有margin-left 属性，外部盒子有pandding-left属性的，这个时候会有属性冲突导致只有一个left属性有效果
建议在盒子嵌套时候避免内外盒子的margin和pandding同方向使用
