子元素margin-top影响父元素

问题：

 
  div父包裹div子时，设置div子的margin-top属性会影响div父的margin-top行为。即父子div同时具有了margin-top的属性。

代码：

 
 


分析：

 
  这是由w3的规范决定的行为。

 
  根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠

解决方法：

    1.让子元素脱离文档流（display:absolute;或者设置display:float;）。

    2.设置父元素或者自身的display:inline-block;。

 
  3.给父元素设置overflow:hidden;。

 
  4.设置父元素border。

 
  5.设置父元素padding-top(一般设置：padding-top:1px;)。

 
  6.填充父元素内容，使父元素非空。

tips:

     在chrome等浏览器中会出现这种情况，在ie6、7中则不会。