IE7下fload:left造成双倍边距BUG

双倍边距bug在IE6中经常出现，在IE7很少遇见

今天做一个活动页面的时候在IE7遇到了双倍边距困扰，倒弄好半天没找到原因，在大师指点下找到了原因：

正常效果图如下：

要实现4个图片摆放效果：

情况1、我把头像和兑换图片放到一个box里面

   box的css     .box{65px; height:80px;  float:left; margin:5px 20px 0px; }/*红色部分是造成bug的关键*/

　头像的css     .photo{ 50px; height:50px; background:url(images/photo.png) no-repeat; margin:0 auto; }

　兑换按钮css  .btn{ 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{65px; height:80px;  float:left; margin:5px 20px 0px  0px; }/*添加了0px*/

情况3、如果把box的css修改成下面情况(（添加display:inline就可以解决IE7双倍边距的问题）)

.box{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同方向使用