IE和FF的边距区别

 

上下margin叠加问题

       例如：

              #a{

                     width:100px;

                     height:100px;

                     background-color:#eeeeee;

                     border:5px solid #bbbbbbb;

                     margin:10px;

                }

       #b{

                     width:100px;

                     height:100px;

                     background-color:#bbbbbb;

                     border:5px solid #999999;

                     margin:10px;

                }

也许你会觉得，由于a对象有下边距10px，b对象有上边距10px，因此它们的上下距离是20px。实际上，它们的上下距离都是10px。这种原因是由CSS设计造成的。由此造成排版距离不一致，所以设计出这种空白边叠加规则。

空白边叠加时，以较大的margin值为准。

对于CSS的解释规则而言，一旦把某一个元素设定float属性。那么它们将不再进行空白边叠加。例如：

#a{

                     width:100px;

                     height:100px;

                     background-color:#eeeeee;

                     border:5px solid #bbbbbbb;

                     margin:10px;

                     float:left;

                }

     #b{

                     width:100px;

                     height:100px;

                     background-color:#bbbbbb;

                     border:5px solid #999999;

                     margin:10px;

float:left;

clear：both；

}

这样a和b的间距变成了符合盒子模型的20px间距。

 

左右margin加倍的问题

   当我们的盒对象为浮动状态时，在IE6之中，盒对象的左右margin会加倍。这是CSS解析问题，我们可以通过设置对象display:inline;来解决。